一、绑定样式
1、: class绑定类选择器
（1）通过对象绑定样式
① 绑定单个样式
<div id="app">
<ul class="city">
<li :class="{active:index===activeIndex}" v-for="(item,index) in citys" ::key="index" @click="activeIndex=index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data: {
// 高亮下标
activeIndex:1,
// 城市数组
citys:['北京','南京','天津','东京'],
},
})
</script>
② 绑定多个样式
:class绑定样式时，对象的属性名是类选择器的名称，如果属性值返回true，表示添加该选择器
<div id="app">
<button @click="bgColor=true">添加背景颜色</button>
<button @click="fontColor=true">添加文本颜色</button>
<button @click="border=true">添加容器边框</button>
<!-- bgColor 前者为选择器样式名，后者为数据属性名 -->
<div class="box1" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">好好学习vue</div>
</div>
<script>
new Vue({
el:'#app',
data: {
// 是否添加背景颜色
bgColor:false,
// 是否添加文本色
fontColor:false,
// 是否显示边框
border:false,
},
})
</script>
（2）通过三元表达式绑定样式
绑定的三元表达式条件为true时，添加选择器；条件为false则不添
加。
① 绑定单个样式 （直接添加）
<div id="app">
<div class="box1" :class="bgColor?'bgColor':''">好好学习vue</div>
</div>
② 绑定多个样式（通过数组绑定添加）
<div id="app">
<div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好学习vue</div>
</div>
2、：style绑定内联样式
:style 绑定样式时，通常也是绑定一个对象，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值
<div id="app">
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好学习vue
<p>背景色：<input type="text" v-model="bgc"></p>
<p>文本色：<input type="text" v-model="fc"></p>
</div>
</div>
<script>
new Vue({
el:'#app',
data: {
// 定义背景颜色
bgc:'orangered',
// 定义文本颜色
fc:'white',
},
})
</script>
效果：改变输入框的值，可以改变背景色和文本颜色
image.png
二、计算属性
1、普通方法
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<p>普通方法返回姓名：<input type="text" :value="fullName()"></p>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address:'成都',
methods: {
fullName(){
return this.firstName + '.' + this.lastName
},
</script>
2、计算属性方法
计算属性的优势是：有缓存，当页面数据发生变化时，所有的方法都要重新执行
当计算属性用到的数据发生变化时，计算属性才会重新执行
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<p>计算属性返回姓名：<input type="text" :value="fullName2"></p>
</div>
注意：计算属性在默认情况下只能读，不能改
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address:'成都',
// 用于定义计算属性
computed: {
// 在这里面定义的是方法，计算属性在默认情况下只能读，不能改
fullName2(){
return this.firstName + '.' + this.lastName
},
}
})
</script>
如果需要修改计算属性的值，需要定义完整结构的计算属性，并且使用v-model绑定计算属性。用法如下所示：
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<p>计算属性返回姓名：<input type="text" :value="fullName2"></p>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
address:'成都',
},
// 用于定义计算属性
computed: {
// 定义完整结构的计算属性
fullName: {
// get方法，用于返回计算属性的值
get() {
return this.firstName + '.' + this.lastName
},
// set方法，用于修改计算属性的值
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
},
})
</script>
三、数据侦听器|监听器 watch
1、监听数据
根据属性的名称定义一个方法（方法名和属性名相同），用于侦听该属性的变化。
定义的监听属性的方法，可以传两个参数，第一个是最新值，第二个是旧值
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '张三',
age: 20,
},
watch: {
name(nval, oval) {
// 比如：当name属性值发生变化时，重新发送ajax请求获取新的数据
console.log(nval, oval);
},
age(nval, oval) {
// 比如：当age属性值发生变化时，重新发送ajax请求获取新的数据
console.log(nval, oval);
}
}
})
</script>
2、监听对象
如果要实现深度侦听对象的变化（也就是对象具体属性的变化），就需要使用完整的写法，定义一个对象。
deep属性：在对象中，通过deep属性设置深度监视。
immediate属性：如果希望页面加载完成时，先运行一次监视器（注意：这种情况下，旧值是undefined），需要设置immediate:true。
handler：通过handler定义监视器的方法。
注意：开启深度监视后，旧值已经没有意义。因为对象是引用类型，对象的属性值已经改了，就没有旧的属性值。
<div id="app">
<h2>学生信息</h2>
<button @click="resetStudent">修改学生信息</button>
<p>姓名：<input v-model="student.name"></p>
<p>年龄：<input v-model="student.age"></p>
<p>性别：<input v-model="student.sex"></p>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
student: {
name: '李四',
age: 20,
sex: '女'
}
},
methods: {
resetStudent() {
this.student = {
name: '王五',
age: 25,
sex: '男'
}
}
},
// 数据侦听器
watch: {
// 侦听对象，需要开启深度侦听
student: {
// 开启深度监视
deep: true,
// 页面加载完成时，先运行一次（注意：这种情况下，旧值属性值为undefined
immediate: true,
// 定义监视的函数
handler(nval, oval) {
// 开启深度监视后，旧值已经没有意义，因为对象是引用类型
// 对象的属性值已经改了，就没有旧的属性值
console.log(nval, oval);
}
}
}
})
</script>
3、通过计算属性进行监听
当前计算机属性里面用到的数据发生变动时，会重新执行计算属性。
只是计算机属性必须要在模板中使用
<div id="app">
<p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
age: 20,
},
// 计算属性，也有监视的能力
computed: {
MyAge() {
// 当前计算机属性里面用到的数据发生变动时，会重新执行计算属性
// 只是计算机属性必须要在模板中使用
console.log(this.age);
return this.age
}
}
})
</script>
四、过滤器
1、普通方法
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{toFixed2(goods.price)}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.00
}
},
// 定义方法，过滤商品的价格
methods: {
toFixed2(val){
return val.toFixed(2)
}
},
</script>
2、通过计算属性备份原始数据，再返回
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{myGoods.price}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.00
}
},
// 定义一个计算属性
computed:{
myGoods(){
let goods = {
name:this.goods.name,
price:this.goods.price.toFixed(2)
}
return goods
}
},
</script>
3、过滤器
通过管道符 | 调用过滤器,原理就是将“管道符”左边的值传给“管道符”右边的方法去处理，并返回处理过后的结果。
过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序。
定义过滤器有两种方式：局部过滤器，全局过滤器。当全局过滤器和局部过滤器冲突时，优先级更高的是局部过滤器。
1、局部过滤器
局部过滤器（Vue实例内部定义的过滤器），只有当前Vue实例可以访问。在filters中定义过滤器。
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2}}</p>
<!-- 通过管道符| 调用过滤器，其实就是调用那个方法，将值传进去，再返回新的值 -->
<p>商品价格(人民币)：{{goods.price | toFixed2 | toRMB}}
<input type="text" :value="goods.price | toFixed2">
</p>
<!-- 过滤器可以链式调用，就是之前已经过滤完成的结果，继续传给下一个过滤器，注意顺序 -->
<p>商品价格(美元)：{{goods.price | toFixed2 | toUS}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.22222
}
},
// 定义过滤器
filters:{
// 过滤在模板中通过管道符 | 的方式来调用
toFixed2(val){
return val.toFixed(2)
},
//返回人民币数据
toRMB(val){
return '￥'+ val
},
//返回美元数据
toUS(val){
return '$'+ (val/6.5).toFixed(2)
}
}
})
</script>
2、全局过滤器
在创建 Vue 实例之前定义的全局过滤器，所有的Vue实例都可以访问。
<!-- app 和 app2容器都可以使用全局过滤器toFixed2、toRMB -->
<div id="app">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
</div>
<div id="app2">
<p>商品名称：{{goods.name}}</p>
<p>商品价格：{{goods.price | toFixed2 | toRMB}}</p>
</div>
Vue.filter("toFixed2", function (val) {
return val.toFixed(2);
});
Vue.filter('toRMB', function(val){
return '￥'+ val
})
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.22222
}
}
})
new Vue({
el:'#app2',
data:{
goods:{
name:'华为手机',
price:2999.33333
}
}
})
