前言：这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧！
一、Vue的计算属性
关键词：computed。
用来处理一些复杂的逻辑，类似于在computed里面建立一个函数或方法。
（1）一个例子
假如需要反转一个字符串，我们会这么做：
<div id="app">
{{message.split('').reverse().join('')}}
</div>
但是如果我们要在多处反转字符串，这样写反而麻烦，不利于多次调用，也不容易看懂理解。
如果使用计算属性，就会方便许多，来看看吧：
<div id="app">
<p>原始字符串：{{message}}</p>
<p>计算属性后反转的字符串{{reversedMessage}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:'我爱学习'
},
computed:{
//计算属性的getter
reversedMessage:function(){
//this指向vm实例
return this.message.split('').reverse().join('')
}
}
})
</script>
这个例子声明了一个计算属性reversedMessage，提供的函数将用作属性vm.reversedMessage的getter。当vm.message（依赖）的值改变时，vm.reversedMessage也会跟着更新改变。
（2）computed 和 methods 的比较
如果使用methods是这样的：
methods:{
reversedMessage:function(){
return this.message.split('').reverse().join('')
}
}
看了上面的代码，发现，诶，好像和methods没有什么区别嘛，确实，在效果上两个都是一样的。区别：
- 但是computed是基于它的依赖缓存，只有相关依赖发生改变是才会重新取值；
- 而在使用methods时，在重新渲染的时候，函数总会重新调用执行。
简答说就是，使用computed性能会更好，但是如果不希望有缓存，可以使用methods属性。
（3）computed的setter
computed属性默认只有getter，不过在需要的时候也可以直接提供一个setter：
<script>
var vm = new Vue({
el:"#app",
data:{
name:"小花",
age:"18"
},
computed:{
site:{
//getter
get:function(){
return this.name+' '+this.age
},
//setter
set:function(newvalue){
var names = newvalue.split('')//把用户输入的site分开
this.name = names[0]
this.age = names[names.length-1]
}
}
}
})
//调用setter、vm.name和vm.age也会被对应更新
vm.site = '大花 31'; //这里已经改变了原来的数据
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
</script>
运行结果为:
//没有调用之前 小花 18 //调用之后 name:大花 age：31
二、Vue的监听属性
监听属性 watch 就是当你监听的那个参数发生改变时，就会触发一个事件/函数。我们可以通过watch来响应数据的变化。
例如：要进行千米和米之间的转化，就可以使用监听
<div id="app">
千米：<input type = "text" v-model = "km">
米：<input type = "text" v-model = "m">
</div>
<p id="info"></p>
<script>
var vm = new Vue({
el:"#app",
data:{
km:0,
m:0
},
watch:{
km:function(value){
this.km = value;
this.m = this.km * 1000
},
m:function(value){
this.km = value/1000;
this.m = value;
}
}
});
//$watch是一个实例方法
//这里监听的是km的变化，当km变化时，就会响应
vm.$watch('km',function(newvalue,oldvalue){
//这个回调将在vm.km被改变后使用
//新的值写在前面，旧的写在后面
document.getElementById("info").innerHTML = "修改前值为："+oldvalue + ",修改后的值为：" + newvalue;
})
</script>
运行结果如下：
当两个框其中一个框改变时，都会相应的改变
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1yqp0eyN-1595323649777)(C:\Users\sandy燕\Desktop\2.JPG)]
是不是很好玩啊！！！！！
三、Vue的样式绑定
- class 和 style 是HTML元素的属性，用于设置元素的样式，在vue中我们可以通过v-bind来设置样式属性。
- v-bind 在处理class 和style时，专门增强了它。表达式的结果除了字符串之外，还可以是对象或数组。
class属性绑定
（1）为v-bind：class设置一个对象
<div v-bind:class="{'active':isactive}"></div>
当isactive的值为true时，则为这个div设置了active样的class
（2）在对象中传入更多属性来动态切换多个class
<div class="app" v-bind:class="{'aaa:isaaa','bbb:isbbb'}">
</div>
//则这个div有三个class，即app、aaa、bbb
<!-- <div class="app aaa bbb"></div>
当isbbb为true时，它会覆盖前面的class-->
（3）直接在data里绑定一个对象
<div id="app">
<div v-bind:class="hhh"></div>//这里hhh为对象
</div>
<script>
new Vue({
el: '#app',
data: {
hhh: {
aaa: true, //这里aaa为一种class
'bbb': true //这里bbb为一种class
}
}
})
</script>
（4）绑定返回对象的计算属性。这是一个常用且强大的模式
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,//判断是否为true
'text-danger': this.error.value && this.error.type === 'fatal',//判断是否为true
}
}
}
})
</script>
（5）数组语法
可以把一个数组传给v-bind：class
<div id="app">
<div v-bind:class="[aaa, bbb]"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
//这里的aaa bbb 都是class
activeClass: 'aaa',
errorClass: 'bbb'
}
})
</script>
还可以使用三元表达式来切换列表中的class：
<div v-bind:class = "[hhhclass,isaaa ? aaaclass : '']"></div>
hhhclass是始终存在的，当isaaa值为true时添加aaaclass类。
Vue的style（内联样式）
（1）直接在v-bind里设置样式:
<div id="app">
<div v-bind:style="{color:aaacolor,fontSize:size+'px'}">
我爱学习
</div>
</div>
<!-- 即为<div style="color:red;font-size:30px">我爱学习</div>-->
（2）直接绑定到一个样式对象，让模板更清晰：
<div id="app">
<div v-bind:style="styleObject">我爱学习</div>
</div>
//styleobject在data里定义
（3）使用数组将多个样式对象应用到一个元素上;
<div id="app">
<div v-bind:style="[aaastyle,bbbstyle]">我爱学习</div>
</div>
<script>
new Vue({
el: '#app',
data: {
aaastyles: {
color: 'green',
fontSize: '30px'
},
bbbstyles: {
'font-weight': 'bold'
}
}
})
</script>
自动添加前缀
当 v-bind：style 使用需要添加 浏览器引擎前缀 的css property时，如 transform，vue. js会自动侦测并添加相应的前缀。