Vue.js学习系列（三十二）-- Vue.js样式绑定（三）
2017-03-19 00:00
686 查看
1.3 绑定返回对象的计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
<style type="text/css">
.active {
width: 100px;
height: 100px;
border: 1px solid red;
background: green
}
.content{
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObj">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isActive:true,
error:null
},
computed:{
classObj:function () {
return{
active: this.isActive && !this.error,
'content': this.error && this.error.type === 'fatal',
}
}
}
})
</script>
</body>
</html>
运行结果为：
有运行结果可以看到，div只显示的active类的样式，没有显示content类的样式。是因为在计算属性computed中我们设置了'content': this.error && this.error.type === 'fatal',。这句话表示content类出现错误。所以就不会显示在div上，
此时div的类为<div class="active"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
<style type="text/css">
.active {
width: 100px;
height: 100px;
border: 1px solid red;
background: green
}
.content{
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObj">我是div</div>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
isActive:true,
error:null
},
computed:{
classObj:function () {
return{
active: this.isActive && !this.error,
'content': this.error && this.error.type === 'fatal',
}
}
}
})
</script>
</body>
</html>
运行结果为：
有运行结果可以看到，div只显示的active类的样式，没有显示content类的样式。是因为在计算属性computed中我们设置了'content': this.error && this.error.type === 'fatal',。这句话表示content类出现错误。所以就不会显示在div上，
此时div的类为<div class="active"></div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js学习系列（三十二）-- Vue.js样式绑定（三）
- Vue.js学习系列（三十）-- Vue.js样式绑定（一）
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
- Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
- Vue.js学习系列（三十三）-- Vue.js样式绑定（四）
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- Vue.js学习系列（三十三）-- Vue.js样式绑定（四）
- Vue.js学习系列（三十）-- Vue.js样式绑定（一）
- Vue.js学习 Item6 -- Class 与 样式绑定
- Vue.js基础学习之class与样式绑定
- vue.js学习笔记之绑定style样式和class列表
- Vue.js学习 Item6 -- Class 与 样式绑定
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- vue.js绑定class和style样式（6）
- Vue.js学习系列（五）---vuejs指令
- Vue.js学习系列四——Webpack打包工具的使用（装修中……）
- Vue.js学习系列（八）---如何使用组件
- Vue.js学习系列（四）---初学者易入误区
- Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）