Vue入门笔记(三)
计算属性
- 使用范围
在遇到复杂的逻辑时使用计算属性。
<body>
<div id="app">{{reversedText}}</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
text: '123,456'
},
computed: {
reversedText: function () {
return this.text.split(',').reverse().join(',');
}
}
})
</script>
- 计算属性用法
在一个计算属性里可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果就可以。除了上例简单的用法,计算属性还可以依赖多个 Vue 实例的数据,只要其中任一数据 变化,计算属性就会重新执行,视图也会更新。
<body>
<div id="app">{{sum}}</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
shop: [{
name: "小猪",
price: 500,
count: 5
},
{
name: "小狗",
price: 500,
count: 5
},
{
name: "小猫",
price: 500,
count: 5
}
]
},
computed: {
sum: function () {
var s = 0;
for (var i = 0; i < this.shop.length; i++) {
s += this.shop[i].price*this.shop[i].count;
}
return s;
}
}
});
</script>
当 shop 中的商品有任何变化,比如购买数量变化或增删商品时,计算属性 price 就会自动更新
- 计算属性可以依赖其他计算属性;计算属性不仅可以依赖当前 Vue 实例的数据,还可以依赖其他实例的数据。
<body>
<div id="app1"></div>
<div id="app2">
{{ reversedText }}
</div>
</body>
<script>
var appl = new Vue({
el: '#app1',
data: {
text: '123,456'
}
});
var app2 = new Vue({
el: '#app2 ',
computed: {
reversedText: function () {
return appl.text.split(",").reverse().join(",");
}
}
});
</script>
这里我们创建了两个 Vue 实例 appl 和 app2, 在 app2 的计算属性reversedText 中,依赖的是 appl 的数据 text,所以当 text 变化时,实例 app2 的计算属性也会变化。
- 计算属性缓存
计算属性是基于它的依赖缓存的。 一个计算属性所依赖的数据发生变化时,它才会重新取值,所以 text 只要不改变,计算属性也就不更新。
使用计算属性还是 methods 取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用 计算属性,除非你不希望得到缓存。
详细解释参考
v-bind 及 class
- 绑定 class
如下代码所示如果isActive==false则添加类不成功,为true是添加active类成功
<body>
<div id="app">
<div :class="{'active':isActive}"></div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true
}
})
</script>
上面示例中,类名 active 依赖于数据 isActive,当其为 true 时, div 会拥有类名 Active,为 false 时则没有。
对象中也可以传入多个属性,来动态切换 class。另外,:class 可以与普通 class 共存。
<div :class="{'active':isActive,'error':isError}" class="yzy"></div>
如果isActive,isError同时为true则
<div class="active error yzy"></div>
- class绑定的数组语法
<body>
<div id="app">
<div :class="[isActive,isError]"></div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: 'active',
isError:'error'
}
})
</script>
渲染后的结果为<div class="active error"></div>
在数组中还可以使用三元表达式
<body>
<div :class="[isActive?activeC:'',errorC]"></div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: true,
actiuveC:'active',
ErrorC:'error'
}
})
</script>
- class 有多个条件时,可以在数组语法中使用对象语法与对象语法一样,也可以使用 data、 computed 和 methods 三种方法。
b-bind绑定内联样式
方法与:class 类似,也有对象语法和 数组语法,看起来很像直接在元素上写 CSS
<body>
<div id="app">
<div :style="{'color':color,'font-size':fontsize+'px'}">文本</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
color: "red",
fontsize: "50"
}
})
</script>
css 属性名称使用驼峰命名(cameCase)或短横分隔命名(kebab-case)
大多数情况下, 直接写一长串 的样式不便于阅读和维护,所以一般写在 data 或 computed 里。
<body>
<div id="app">
<div :style="stylee">文本</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
stylee:{
color:"red",
fontSize:10+'px'//这里用短横分隔命名可能会出错
}
}
})
</script>