数据操作
1.数据data(属性):vue实例的数据对象,Vue将会递归,将data的属性转换为getter/setter,从而让data的属性能够相应数据变化。
data:{isHot:true}
2.方法methods:使用methods属性给Vue定义方法,访问data中的数据
methods:{changeWeather(){this.isHot =!this.isHot
}}
在方法中访问属性:在methods中访问data的数据,可以通过this.属性名的形式来访问。
示例:例如我们在show方法中,访问number属性,可以直接通过this.number形式访问,其中this就表示vue实例对象。如果在Vue构造外部,可以使用vm.方法名 定义或调用方法,通过vm.$data.属性名来访问data中的属性。
3.计算属性computed:(变量)
computed用来监控自己定义的一个变量,进行处理后返回一个结果值。
computed:{info(){returnthis.isHot ?'炎热':' 凉爽'}}
4.监视属性:watch
- 当被监视的属性变化时:回调函数自动调用,进行相关操作。
- 监视的属性必须存在,才能进行监视!!
- 监视的两种写法: (1).new Vue时传入watch配置
watch:{
isHot:{handler(newValue,oldValue){
console.log('isHot被修改了','newValue,oldValue')}}}
(2)通过vm.$watch监视
vm.$watch('isHot',{immediate:true,//初始化时让handler调用一下//handler什么时候调用?当isHot发生改变时handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)}})
版权归原作者 伊犁彭于晏 所有, 如有侵权,请联系我们删除。