详解vue 实例方法和数据

前端之家收集整理的这篇文章主要介绍了详解vue 实例方法和数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.vm.$set

问题描述:

如何在不通过循环数据给list数据添加一个showMore属性,并且在moreFun中改变这个新增属性的值,并实现双向绑定?

@H_403_19@ export default { name: 'app',data() { return { list: [{ name: '小颖' },{ name: '仔仔' },{ name: '黑妞' },{ name: '土豆' }] } },methods: { moreFun(index) { console.log(this.list); } } }

一开始小颖并不知道怎么做,而且小颖觉得

这段代码肯定会报错,然而当小颖写上后发现,并没有,后来那位帅锅告诉我,看看vue的 vm.$set 小颖看后将moreFun方法写为:

然后就达到小颖想要的结果啦。小颖当时遇到的问题类似于这样的:

@H_403_19@ export default { name: 'app',data() { return { num1: 1,num2: 5,resultNum: null } },watch: { num1: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; },num2: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; } },mounted: function() { var _num1 = parseInt(this.num1); var _num2 = parseInt(this.num2); this.resultNum = _num1 - _num2; } }

3.vm.$delete

用法

这是全局 Vue.delete 的别名。

@H_403_19@ export default { name: 'app',data() { return { list: [{ name: '小颖',age:22 },{ name: '仔仔',age:1 },{ name: '黑妞',{ name: '土豆',age:1 }] } },methods: { deleteFun(index) { this.$delete(this.list[index],'age'); } } }

总结

以上所述是小编给大家介绍的vue 实例方法和数据。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章