在HTML中 vue和jquery混合使用,相互调数据
1:创建VUE实例<script type="text/javascript">var vm = new Vue({el:'#app',//实例化对象data:{ newArry:[] //空数组},methods:{//实例方法编辑区}})</script>jquery和vue之间互相调用(模拟接口拿到数据)<
·
<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>
更多推荐
已为社区贡献1条内容
所有评论(0)