5.样式绑定:：
5.1calss的样式绑定： :class="{activeted:isActiveted}"表示样式calss为activeted,取决于
变量isActiveted. this.isActiveted=!this.isActiveted;不等于之前的false，再次点击复原
<style>
.activeted{
color:red;
}
</style>
<div id="root"><div @click="handleDivClick"
:class="{activeted:isActiveted}"
>Helloword</div></div>
<Script>
var vm =new Vue({
el:"#root",
data:{
isActiveted:false
},
methods:{
handleDivClick:function(){
this.isActiveted=!this.isActiveted;
}
}
})
</Script>
5.2class的数组[activted]绑定,div中显示一个样式class,显示内容为数组[activeted]中的内容
当点击时，class中是activeted中的字符串“activeted”,所以类名变为class="activeted"
<div id="root"><div @click="handleDivClick"
:class="[activeted]"
>Helloword</div></div>
<Script>
var vm =new Vue({
el:"#root",
data:{
activted:"",
},
methods:{
handleDivClick:function(){
/* if(this.activeted==="activeted"){
this.activeted="";
}else{
this.activeted="activeted"}*/
this.activeted=this.activeted==="activeted"?"":"activeted"
}
}
})
</Script>
5.3styled的样式绑定:开始时第一次点击，页面又style确定this.bkcolor.color是black,所以颜色给变为
red,
下一次点击时候颜色不是black,所以变为black.
<div id="root"><div :style="bkcolor"
@click="handleDivClick"
>Helloword</div></div>
<Script>
var vm =new Vue({
el:"#root",
data:{
bkcolor:{
color:"black"
}
},
methods:{
handleDivClick:function(){
this.bkcolor.color=this.bkcolor.color==="black"?"red":"black"
}
}
})
</Script>
5.4style后面绑定数组样式：
<div id="root"><div :style="[bkcolor]"
@click="handleDivClick"
>Helloword</div></div>
<Script>
var vm =new Vue({
el:"#root",
data:{
bkcolor:{
color:"black"，
fontSize:'20px'
},
},
methods:{
handleDivClick:function(){
this.bkcolor.color=this.bkcolor.color==="black"?"red":"black";
this.bkcolor.fontSize=this.bkcolor.fontSize==="20px"?"30px":"20px";
}
}
})
</Script>
6.Vue中的条件渲染:v-if,v-show，都能条件控制，v-if会频繁删除添加Dom，所以用v-show性能高
v-if 与v-else连在一起写
<div id="root">
<div v-if="show">Helloword</div>
<div v-else>Bye Bye</div>
<div v-show="show">Helloword</div>
</div>
<Script>
var vm =new Vue({
el:"#root",
data:{
show:false,
message:"hello world",
}
})
</Script>
6.2Vue中key值的条件判断
<div id="root">
<div v-if="show">用户名<input key="password"/></div>
<div v-else>邮箱<input key="@com"/></div>
</div>
<Script>
var vm = new Vue({
el:'#root',
data:{
show:false,
}
})
</Script>
7.Vue中set（）方法:Vue.set(vm.userof,"adress","beijing");
vm.$set(vm.userof,"adress","beijing");
<div id="root">
<div v-for="(item key index) of userof">{{item}} ---{{key}} ---{{index}}</div>
</div>
<Script>
var vm = new Vue({
el:'#root',
data:{
userof:{
name:'li',
age:20,
gender:"男",
salary:'secret'
}
}
})
</Script>
数组； Vue.set(vm.userof，1,7),把第二位换位7
<div id="root">
<div v-for="(item index) of userof">{{item}}</div>
</div>
<Script>
var vm = new Vue({
el:'#root',
data:{
userof:[1,2,3,4]
}
})
</Script>