您的位置：首页 > 产品设计 > UI/UE

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

2017-03-20 13:35 435 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue.js 样式绑定

相关文章推荐

新的分享

章节导航