（Vue -03）Vue绑定样式 + 计算属性 + 侦听器+ 过
Vue官方文档
首页-学习下拉栏-文档-教程 =>火速一键进入学习
一、绑定样式
1. class 绑定样式
(1) 绑定一个对象，对象的属性名是类选择器名称，属性值返回 true，表示添加该选择器
-
① 绑定单个样式：
<style>
.city li.active{
background-color: orangered;
color: white;
}
</style>
<ul class="city">
<!-- index===activeIndex判断结果为true时，添加active选择器 -->
<li :class="{active:index===activeIndex}" @click="activeIndex=index"
v-for="(item,index) in citys" :key="index">{{item}}</li>
</ul>
<script>
new Vue({
el:'#app',
data:{
activeIndex:0,
citys:['北京','南京','天津','东京'],
}
})
</script>
-
② 绑定多个样式：
<style>
.box1{
width: 200px;
height: 100px;
padding: 10px;
margin-top: 10px;
}
.bgColor{
background-color: lightblue;
}
.fontColor{
color: white;
}
.border{
border: 2px solid red;
}
</style>
<button @click="bgColor=true">添加背景颜色</button>
<button @click="fontColor=true">添加文本颜色</button>
<button @click="border=true">添加容器边框</button>
<!-- 绑定class,对象的属性名就是指定类的名称，属性值是true和false -->
<div class="box1" :class="{bgColor:bgColor,fontColor:fontColor,border:border}">好好学习Vue</div>
绑定的对象的，属性名 bgColor 是 css 里的类选择器的名字，
属性值 bgColor 是数据里设置的属性名┗|｀O′|┛ 嗷~~
初始化设定了是false，然后点击的时候呢给它变成true，添加成功啦
<script>
new Vue({
el:'#app',
data:{
activeIndex:0,
citys:['北京','南京','天津','东京'],
bgColor:false, //是否添加背景颜色
fontColor:false, //是否添加文本颜色
border:false, //是否显示边框
}
})
</script>
(2) 绑定一个三元表达式
三元表达式语法结构： 条件表达式 ？ 表达式1 ： 表达式2
如果条件表达式结果为true，则返回 表达式1 ；如果为false ，则返回 表达式2 的值。
-
① 绑定单个样式：
<ul class="city">
<li :class="index===activeIndex?'active':''" @click="activeIndex=index"
v-for="(item,index) in citys" :key="index">{{item}}</li>
</ul>
绑定的三元表达式条件为true时，添加选择器；条件为false则不添加。
-
② 配合数组，绑定多个样式：
<button @click="bgColor=true">添加背景颜色</button>
<button @click="fontColor=true">添加文本颜色</button>
<button @click="border=true">添加容器边框</button>
<div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好学习Vue</div>
<script>
new Vue({
el:'#app',
data:{
activeIndex:0,
citys:['北京','南京','天津','东京'],
bgColor:false, //是否添加背景颜色
fontColor:false, //是否添加文本颜色
border:false, //是否显示边框
}
})
</script>
2. style 绑定样式
:style 绑定样式时，对象的属性名称是原生CSS的属性名严格名称（要使用小驼峰命名法），属性值是具体的样式值，要采用小驼峰命名规范。
<!-- :style绑定样式时，对象的属性名称是css样式的名称（要使用小驼峰命名法），属性值是具体的样式值 -->
<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>
<script>
new Vue({
el:'#app',
data:{
bgc:'orangered', //定义背景颜色
fc:'white' //定义文本颜色
}
})
</script>
二、计算属性 computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
好耶~让我们开始吧┗|｀O′|┛ 嗷~~
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>姓名：<input type="text" :value="firstName+ '.'+ lastName" ></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
}
})
</script>
此时页面效果为：
姓名栏 中的value值会随着 姓栏 和 名栏 的输入而改变，但是需要在 姓名栏 中拼接。
有两种办法可以解决：
(1) 在methods里写一个方法
通过这个方法返回this.firstName+ '.'+ this.lastName，然后再去调用这个方法。如下：
<p>姓名：<input type="text" :value="fullName()" ></p>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
},
methods: {
fullName(){
return this.firstName+ '.'+ this.lastName
}
},
})
</script>
(2) Vue推出的 计算属性 computed
结果是由两个属性拼接而来，说明 结果是由这两个属性计算而来。
在data同级，加一个computed选项，用于定义计算属性，里面定义的是方法；计算属性本质上是方法，在模板中当成属性去使用。如下：
<p>姓名：<input type="text" :value="fullName" ></p>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
},
methods: {
},
//用于定义计算属性
computed:{
//在这里面定义的是方法
fullName(){
return this.firstName+ '.'+ this.lastName
}
}
})
</script>
此时把 :value 改成 v-model，并不能实现双向绑定，且会报错。
注意： 计算属性默认情况下只能读，不能改。
如果想要让计算属性既能读，又能改，那就要换一种形式啦~
① 在computed里定义完整结构的计算属性，然后使用v-model进行绑定计算属性。
② get方法，用于返回计算属性的值。
③ set方法，用于修改计算属性的值，记得传值。
如下：
<p>姓名：<input type="text" v-model="fullName" ></p>
<script>
new Vue({
el: '#app',
data: {
firstName: '张',
lastName: '杰',
},
methods: {
},
//用于定义计算属性
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">{{MyAge}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'张三',
age:20
},
//数据侦听器
watch:{
name(nval,oval){
//比如：当name属性值发生变化时，重新发送ajax请求获取新的数据
console.log(nval,oval);
},
age(nval,oval){
console.log(nval,oval);
},
},
})
</script>
2. 侦听对象，需要开启深度监视
如果要实现深度侦听对象的变化（也就是对象具体属性的变化），就需要使用完整的写法，定义一个对象。
deep 属性开启深度监视，值为true 或false
immediate 属性设定页面加载完成时，先运行一次，值为true 或false
（注意：这种情况下，旧值是undefined）
handler 定义监视的函数
注意：开启深度监视后，旧值已经没有意义，因为对象是引用类型，对象的属性值已经改了，就没有旧的属性值。
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
<hr>
<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>
new Vue({
el:'#app',
data:{
name:'张三',
age:20,
student:{
name:'李四',
age:20,
sex:'女'
}
},
methods: {
resetStudent(){
this.student = {
name:'王五',
age:22,
sex:'男'
}
}
},
//数据侦听器
watch:{
name(nval,oval){
console.log(nval,oval);
},
student(nval,oval){
console.log(nval,oval);
},
// 侦听对象，需要开启深度监视
student:{
deep:true,
immediate:true,
handler(nval,oval){
console.log(nval,oval);
}
}
},
//计算属性，也有监视的能力
computed:{
MyAge(){
// 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
// 只是计算属性必须要在模板中使用
console.log(this.age);
return this.age
}
}
})
</script>
3. 计算属性，也有监视的能力
当前计算属性里面用到数据发生变化时，会重新执行计算属性，
只是计算属性必须要在模板中使用（方法要在页面中用一下）
<div id="app">
<p>姓名：<input type="text" v-model="name"></p>
<p>年龄：<input type="text" v-model="age">{{MyAge}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'张三',
age:20
},
//计算属性，也有监视的能力
computed:{
MyAge(){
// 当前计算机属性里面用到数据发生变化时，会重新执行计算属性
// 只是计算属性必须要在模板中使用
console.log(this.age);
return this.age
}
}
})
</script>
四、过滤器
Vue官方的-过滤器
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号 | 指示。
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>
Vue.config.productionTip = false
new Vue({
el:'#app',
data:{
goods:{
name:'小米手机',
price:1999.22222
}
},
// 定义方法，过滤商品的价格
methods: {
toFixed2(val){
return val.toFixed(2)
}
},
// 定义一个计算属性
computed:{
myGoods(){
let goods = {
name:this.goods.name,
price:this.goods.price.toFixed(2)
}
return goods
}
},
// 定义过滤器
filters:{
// 过滤在模板中通过管道符 | 的方式来调用
toFixed2(val){
return val.toFixed(2)
},
//返回人民币数据
toRMB(val){
return '￥'+ val
},
//返回美元数据
toUS(val){
return '$'+ (val/6.5).toFixed(2)
}
}
})
</script>
2. 全局过滤器
在创建 Vue 实例之前定义的全局过滤器，所有的Vue实例都可以访问。
如果局部过滤器和全局过滤器冲突，优先级更高的是局部过滤器。
一般将全局过滤器，会单独创建一个filter文件夹存放┗|｀O′|┛ 嗷~~，
记得在html文件里引入。
<!-- 引入外部js，里面定义的是全局过滤器 -->
<script src="./filter/index.js"></script>
<!-- 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
}
}
})
