程序博客网 > 网络游戏客户端编程

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

来源：互联网发布：网络游戏客户端编程编辑：程序博客网时间：2024/05/22 11:41

1.4 把数组传给 v-bind:class

我们可以把一个数组传给 v-bind:class ，实例如下：

<!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="[activeClass,errorClass]">我是div</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

activeClass:"active",

errorClass:"content"

}

})

</script>

</body>

</html>

运行结果为：

由运行结果可以看出，div的class为

<div class="active text-danger"></div>

1.5 使用三元表达式来切换 class

下面通过三元表达式来切换class，实现和上个例子一样的功能。

<!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="[errorClass,isShow ? activeClass:'']">我是div</div>

</div>

<script type="text/javascript">

new Vue({

el:"#app",

data:{

isShow:true,

activeClass:"active",

errorClass:"content"

}

})

</script>

</body>

</html>

0 0

网络游戏客户端编程

网络游戏客户端编程

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子东的英文单词东英文单词唐念初荆鹤东全文免费阅读荆天明为什么是东皇羽明湖东前夫复追小甜妻荆鹤东东和城香港东荟城皇岗口岸东荟城乐荟城西荟城一期沙井西荟城荟城星荟城东荟城时间廊大屿山东荟城东荟城大屿山东游西荡东荡西游东扬西荡东漂西荡东飘西荡父荡子在线阅读让我们荡起双桨谱子荷东冷若冰霜丽泽荷亭苑星荷豪苑荷香苑风荷苑锦荷苑宝荷欣苑中达宜居荷苑雨荷苑二手房广东东莞市东莞长安吧东莞家教吧东莞厚街吧东莞塘厦鲜花店东莞塘厦方直星澜东莞厂广东省东莞