Vue学习之路第十一篇：为页面元素设置class类样式
程序员文章站
2022-03-29 14:41:42
1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。 2、先来看一个简单的页面样式内容： 里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。 p标签里我们添加v-bind指令，class里 ......
1、class为页面元素的一个属性，通过前面第五篇的内容可知，操作属性需要使用到v-bind指定（也可简写为 :）。
2、先来看一个简单的页面样式内容：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>vue样式</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: bold;
}
.size{
font-size: 30px;
}
</style>
</head>
<body>
<div id="app">
<p class="red size">这是vue样式示例</p>
</div>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{},
methods:{}
})
</script>
</body>
</html>
里面简单的定义了三个样式类：red、thin、size；接下来我们通过v-bind实现同样的效果。
<p v-bind:class="redstr">这是vue样式示例</p>
p标签里我们添加v-bind指令，class里的样式内容为vue对象里data属性定义的“redstr”值。
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
redstr:'red size'
},
methods:{}
})
</script>
data里redstr的值为“red size”，所以运行效果是一样的。
3、看下个例子：
<body>
<div id="app">
<p v-bind:class="['red',flag?'size':'']">这是vue样式示例</p>
</div>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
flag:true
},
methods:{}
})
</script>
</body>
这里我感觉虽然用了v-bind指令，但是其没有从data里取数据，其直接把样式定义成了一个固定字符串数组，通过数组内容取对应的样式。其有一个特点就是可以读取三元表达式，根据三元表达式来控制样式是否进行展示。而且我们还可以对这个三元表达式进行简化，用对象的方式来达到同样的效果。代码如下：
<p v-bind:class="['red',{'size':flag}]">这是vue样式示例</p>
4、下个例子：
<body>
<div id="app">
<p v-bind:class="classobj">这是vue样式示例</p>
</div>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
classobj:{'size':true,'red':true,'thin':true}
},
methods:{}
})
</script>
</body>
这里通过属性绑定了data对象数据classobj，其值为一个对象，通过true或者false来决定是否应用该样式，这样的代码比较简洁而且灵活度比较高。
5、以上几种方式都可以用来定义class样式，具体使用哪一种可以根据具体需求场景来应用。
每天进步一点点！
下一篇： SoftICE命令中文解说之前言