在HTML中 vue和jquery混合使用，相互调数据

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14">script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js">script>

1:创建VUE实例

<script type="text/javascript">var vm = new Vue({el:'#app',  //实例化对象data: function() {return {　         newArry:[{name:100,num:2145},{name:100,num:2145}] //数组}},     methods:{  //实例方法编辑区   } })
script>

jquery和vue之间互相调用(模拟接口拿到数据)

<script type="text/javascript">console.log(vm.newArry) //拿到vue实例中定义的newArry数组 [{name:100,num:2145},{name:100,num:2145}]function getXzcfxq(){$.ajax({type: "get",url: url + 'ltiesList',data: {},success: function (data) {vm.newArry = data.data.list //这里的vm就是上面的实例，newArry是vm实例里面的数组，然后把请求结果赋值给vm里面定义的数组newArry};});script>

2:vue如何调用外部的jq方法呢？
直接把方法写在vm的methods方法里调用

<script type="text/javascript">var vm = new Vue({el:'#app',  //实例化对象data: function() {return {　         newArry:[{name:100,num:2145},{name:100,num:2145}] //数组}},       methods:{  getNewData(this.newArry)   } })//jq定义一个方法function getNewData(newArry){console.log(newArry);//这里是newArry是从vue实例vm方法中getNewData(this.newArry)传来的形参}
script>

3:jq如何调用外部的vue方法呢？

<script type="text/javascript">var vm = new Vue({el:'#app',  //实例化对象data: function() {return {　         newArry:[{name:100,num:2145},{name:100,num:2145}] //数组}},       methods:{  getArry(){console.log(this.newArry)}} })//jq调用vm里面的methods方法$('#app').click(function(){vm.getArry();})
script>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！