一、绑定内联style样式 :style="变量"
- 方式一：把style属性作为普通字符串进行绑定
<元素 :style="变量">
data:{变量："left:100px;top:50px"}
结果：<元素 style="left:100px;top:50px">
问题：如果希望仅修改其中一个css属性值，就很不方便
- 方式二：用对象绑定style
<元素 :style="变量">
data:{
变量:{
left:"100px",
top:"50px"
}
}
结果：Vue绑定语法会将对象翻译为style属性规定的字符串格式
<元素 style="left:100px;top:50px">
- 方式三：给每个需要动态变化的css属性都创建一个变量
<元素 :style="{left:变量1,top:变量2}">
data:{
变量1:"100px",
变量2:"50px"
}
- 有些内联样式不变，而有些变化
<元素 style="不变的css样式" :style="变量">
结果：vue会先绑定:style，翻译为字符串，然后再和不带:的style拼接为一个style。
所以，今后不需要动态绑定的css内联样式属性，就可以放在不带:的style中。只有那些需要动态改变的css属性，才放在:style中。
二、绑定class属性 :class="变量"
style绑定内联样式的问题：大多数样式的修改，都是同时修改多个css属性，如果用style绑定，每个css属性都要写出来，代码繁琐。
只要批量修改一个元素的多个css属性时，应该用class方式，代替style方式。
- 方式一：把class属性作为普通字符串属性进行绑定
<元素 :class="变量">
data:{
变量:"class1 class2"
}
结果：<元素 class="class1 class2">
问题：如果希望仅修改其中一个class，就很不方便。
- 方式二：用对象绑定class
<元素 :class="变量">
data:{
变量:{
class:true或false,
class:true或false
}
}
结果：Vue绑定语法会将对象翻译为class字符串，但是只有那些值为true的class，才会存在于最后 的class中，值为false的class，表示不启用。
- 方式三：为每个class都声明一个变量，在绑定时，可用{}对象语法绑定
<元素 :class="{class1:变量1，class2:变量2,...}">
data:{
变量1:true或false,
变量2:true或false
}
结果：编译时，仅将:class="{}"中值为true的class，变异进最终的class中，值为false的class,不包含在最终的正式class字符串中。
- 有些class不变，而有些变化
<元素 class="不变的class" :class="变量">
结果：vue会先绑定:class，翻译为字符串，然后再和不带:的class拼接为一个class作用在元素上。
今后不需要动态绑定的class，就可放在不带:class中，只有那些需要动态改变的class，才放在:class中。
三、实例：用正则验证手机号显示不同的样式
<style>
/* 定义提示框的基础样式*/
.msg{display:inline-block;width:160px;height:25px;border:1px solid #555;text-align:center;line-height:25px;}
/* 定义提示框在验证通过时的样式*/
.success{border:1px solid green;background-color:lightgreen;color:green}
/* 定义提示框在验证失败时的样式*/
.fail{border:1px solid red;background-color:pink;color:red;}
</style>
<div id="app">
<input type="text" v-model="phone">
<span class="msg" :class="isRight==true?'success':'fail'">{{isRight==true?"手机号格式正确！":"手机号格式错误！"}}</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
phone:"",
isRight:false
},
watch:{
phone(){
var reg=/^1[3-9]\d{9}$/;
this.isRight=reg.test(this.phone)
}
}
})
</script>
