程序博客网 > 淘宝装修店铺视频教程

Vue.js学习系列（三十二）-- Vue.js样式绑定（三）

来源：互联网发布：淘宝装修店铺视频教程编辑：程序博客网时间：2024/05/02 04:21

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>

0 0

淘宝装修店铺视频教程

淘宝装修店铺视频教程

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子蓝牙软件下载蓝牙的英文单词蓝牙是干什么用的蓝牙传输速度用蓝牙怎么传东西蓝牙怎么传送文件手机蓝牙打不开蓝牙如何传文件蓝牙可以传软件吗蓝牙耳机连接不上怎么样用蓝牙传软件下载蓝牙安装到手机蓝牙配对后怎么传文件怎样用蓝牙传文件蓝牙软件下载安卓版蓝牙怎么传送软件如何用蓝牙传软件用蓝牙怎么传软件怎么用蓝牙传文件蓝牙如何传东西如何用蓝牙传输文件如何用蓝牙传送文件蓝牙怎么连接怎么用蓝牙传东西汽车蓝牙怎么连接手机怎样通过蓝牙传软件怎么用蓝牙传软件如何用蓝牙传东西怎么蓝牙传软件蓝牙耳机怎么连接手机图解蓝牙英语怎么写如何用蓝牙传送软件蓝牙怎么传东西给对方手机怎样用蓝牙传东西如何用蓝牙传文件蓝牙耳机排名如何连接蓝牙耳机蓝牙耳机听歌蓝牙耳机耳挂正确挂法蓝牙耳机怎么设置中文迷你蓝牙耳机超小