绑定样式&计算属性&侦听器&过滤器
绑定样式
:class样式绑定
:class可以绑定一个对象，对象的属性名是类选择器的名称，属性值返回true，表示添加该选择器。
:class 三元表达式判断 :class="activeindex === index? 'active' : '' "
<div id="app">
<ul class="list">
<li v-for="(item, index) in citys" :key="index" :class="activeindex===index?'active':'' " @click="activeindex=index" >{{item}}</li>
</ul>
</div>
:class 对象格式去判断:class="{active : index === activeindex }"
<ul class="list">
<li v-for="(item, index) in citys" :key="index" :class="{active:index===activeindex}" @click="activeindex=index" >{{item}}</li>
</ul>
每个按钮绑定一个事件， :class返回的时true 才能够把样式添加进去
<button @click="bgcolor=true">修改背景色</button>
<button @click="fzcolor=true">修改文本色</button>
<button @click="borcolor=true">添加边框</button>
//class选择器:变量名（布尔值类型）
<div class="box1" :class="{bgcolor:bgcolor,fzcolor:fzcolor,borcolor:borcolor}" >
字体阿斯顿啊阿斯顿阿斯顿
</div>
//还可以用数组的形式判断，每一项用三元表达式来判断 (变量名：class选择器)
<div class="box1" :class="[bgcolor?'bgcolor':'',fzcolor?'fzcolor':'',borcolor?'borcolor':'']" >
字体阿斯顿啊阿斯顿阿斯顿
</div>
:style样式绑定
对象的属性名称是css样式的名称(要使用小驼峰命名法)，属性值是具体的样式值(例："red")
<div class="box1" :style="{backgroundColor:bg,color:co}">
字体阿斯顿啊阿斯顿阿斯顿
<input type="text" v-model="bg">
<input type="text" v-model="co">
</div>
class 样式
.bgcolor{
background-color: orangered;
}
.fzcolor{
color: white;
}
.borcolor{
border: 1px solid blue;
}
new Vue({
el:'#app',
data: {
citys:['北京','南京','天津','东京'],
activeindex:0,
bgcolor:false,
fzcolor:false,
borcolor:false,
bg:"orangered",
co:'#fff'
},
})
计算属性
计算属性可以像绑定普通数据一样绑定在模板中绑定，不需要括号
计算属性写在computed:{} 里
计算属性默认只有get方法，在必要的时候可以写set方法
计算属性vs方法
计算属性：
计算属性是基于它们的响应式依赖进行缓存的。
只有跟计算属性相关的值或者数据发生改变时，才会重新执行计算属性
方法：
每当触发重新渲染时，调用方法将总会再次执行函数（在执行一遍）。
总结：计算属性可以提高性能优化
<div id="app">
<div>{{fullname}}</div>
</div>
computed:{
fullname(){
return '计算属性'
},
full: {
get() {
console.log('计算属性方法');
return this.fristname + '.' + this.lastname
},
set(val) {
let str = val.split('.')
console.log(str);
this.fristname = str[0]
this.lastname = str[1]
}
},
}
侦听器/监听器
监听器方法名跟监听的数据名相同
侦听器是根据数据的名称来定义的，该属性是监听该属性值是否发生变化有两个参数（新值，旧值）
侦听器写在watch:{}中
当姓名：的值发生变化时，监听器name就会打印新值和旧值
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age"></p>{{myAge}}
<div>
<button @click="updata">修改</button>
<p><input type="text" v-model="student.name"></p>
<p><input type="text" v-model="student.age"></p>
<p><input type="text" v-model="student.sex"></p>
</div>
</div>
当我点击修改按钮，触发updata()方法时，触发监听器，监听器能够打印新旧值
当我把updata方法换成setdata方法时，这时候值发生了改变，但是，监听器没有触发，所以要开启深度监听 deep: true,
new Vue({
el: "#app",
data: {
name: '张三',
age: 20,
student: {
name: '张三',
age: 20,
sex: '男'
}
},
methods: {
updata() {
this.student = {
name: '李四',
age: 22,
sex: '女'
}
},
setdata(){
this.student.name="王五"
this.student.age="25"
this.student.sex="男"
}
},
watch: { //新值 旧值
//监听器的方法名跟监听的数据名相同
name(nval, oval) {
//新值 旧值
console.log(nval, oval);
},
student: {
//开启深度监听
deep: true,
//页面渲染完成时，先运行一次‘
immediate: true,
注意：只有整个student对象变化了才会监听到，如果只是修改对象身上的属性，监听不到。
handler(nval, oval) {
console.log(nval, oval);
}
},
})
过滤器
vue 允许你可以自定义一个过滤器，通常是一些文本格式，过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<div id="app">
<p>商品名称：{{goods.name}}</p>
<h4>方法</h4>
<p>商品名称：{{tofixed2(goods.price)}}</p>
<h4> 计算属性 放回一个新的对象</h4>
<p>商品名称：{{myGoods.price}}</p>
<h4>过滤器</h4>
<p>商品价格：{{goods.price | tofixed3}}</p>
<p>商品价格(人民币)：{{goods.price | tofixed3 | toRMB}}</p>
<p>商品价格(美元)：{{goods.price | tofixed3 | toUS}}</p>
</div>
过滤器每次都是接收前一个表达式的值goods.price，作为第一个参数。
过滤器可以用链式的方式 用 |来 分开 如上代码所示：
new Vue({
el: '#app',
data: {
goods: {
name: '小米手机',
price: 1999
}
},
methods: {
tofixed2(val) {
return val.toFixed(2)
}
},
computed: {
myGoods() {
let goods = {
name: this.goods.name,
price: this.goods.price.toFixed(2)
}
return goods
}
},
//定义过滤器 可以链式使用
filters: {
tofixed3(val) {
return val.toFixed(2)
},
toRMB(val) {
return "￥" + val
},
toUS(val) {
return "$" + (val / 6.5).toFixed(2)
}
}
})
