计算属性computed
在变量发生变化的时候,computed
内的计算属性会自动进行重新计算并渲染到页面。(不仅限于数值的运算,可以是对象、字符串、数组等)
data(){
return {
count: 2,
price: 10,
message: '123'
}
},
computed: {
// 当计算属性依赖的内容发生变更时,才会重新计算
total(){
return this.price * this.count
}
},
methods:{
// 当页面重新渲染,才会重新计算
getTotal(){
return this.price * this.count
}
}
<div>{{total}}</div> <!-- 当动态改变message的时候,这个total值是不会变化的 -->
<div>{{message}} {{getTotal()}}</div> <!-- 当动态改变message的时候,此div会重新渲染,重新调用getTotal方法-->
侦听器watcher
监听属性的变化,在侦听器的函数上有两个参数,分别是修改后和修改前的值。
data(){
return {
count:2,
price:5,
total:10
}
},
watch: {
// current表示当前修改后的值,prev表示历史值
price(current,prev) {
return this.count * current;
}
}
<div>{{total}}</div>
注意:
- 在
computed
和method
都可以实现的时候,优先使用computed
- 在
computed
和watcher
都可以实现的时候,优先使用computed
样式绑定
样式绑定的三种方式:
- 字符串方式:适用于只绑定一个class;
- 数组方式:适用于绑定多个class;
- 对象方式:适用于绑定多个class;
<style>
.classOne {
color :red;
}
.classTwo {
font-size:100px;
}
</style>
data(){
return {
classString:'classOne',
classObject:{ classOne:true,classTwo:false },
classArray:['classOne','classTwo']
}
}
template:`<div :class="classArray">hello world!</div>`
这里如果使用的是style属性,不是使用class,style对应的属性值,定义在变量里面,应该怎么去做。如下代码:
data() {
return{
styleString:"color:red;font-size:100px;",
styleObject:{
color :red;
font-size:100px;
}
}
}
template:`<div :style="styleString">hello world!</div>`
template:`<div :style="styleObject">hello world!</div>`