vue02

Posted 2021-05-07 h5lcy

vue中的指令

v-if指令(v-if，v-else-if，v-else用法可参照js中的用法)：用来根据表达式的结果是否为真，决定是否插入该节点

v-show指令：和v-if一样，都是使用判断是否插入节点，功能一样；区别：v-show更高效，确保属性值在发生改变时，每次都会重新渲染

vue中的计算属性computed

计算属性在计算一些复杂的逻辑数据处理时是很有用的；计算属性要依赖data属性的值变化；data中的属性值变化时，计算属性也会更新;

computed默认只有getter取值，如果要赋值，需要添加setter

computed:{
get:function(){

}
set:function(){
this.msg = "";
}
}

　vue中的监听属性watch

我们可以通过watch来监听数据的变化，参数1：监听data中的属性名，参数2：当监听的属性发生改变时，触发的回调函数；参数1：属性新值，参数2：属性原来的值　

watch:{
msg:function(a,b){

}
}

　　监听对象的方式

第一种方式:在vue内部写     监听对象的属性变化，必须使用深度监听deep:true

数组名：{
handler:function(){

},
deep:true
}

　　第二种：在vue外部写

vue变量名.$watch("数组名"，{
deep:true,
handler:function(){

}
})

　　属性绑定的几种方式

1.访问样式中的属性

<p :class="msg"></p>

2.使用对象

<p :class="{class名，true}"></p>

3.使用三目运算符

<p :class="fslse ? msg1 : msg2"></p>

4.使用数组

<p :class="[msg1,msg2]"></p>

5.内联样式

<p :style = "msg"></p>