此案例的主要功能:
该案例主要通过使用数组设置v-bind:class的属性值,实现为一个元素来设置多中不同的效果,具体案例效果如下,改选子集需要渲染的样式即可对文本进行样式渲染。
具体的代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用v-bind通过数组绑定多个class案例</title>
<script src="../BLBL笔记/lib/vue.min.js"></script>
<style>
.myClass1{
font-style: italic;
}
.myClass2{
text-decoration: underline;
}
.myClass3{
font-family: "隶书";
}
</style>
</head>
<body>
<div id="app">
<label><input type="checkbox" v-model = "myChecked1">斜体</label>
<label><input type="checkbox" v-model = "myChecked2">下划线</label>
<label><input type="checkbox" v-model = "myChecked3">隶书</label>
<br /><br />
<div v-bind:class="[myChecked1?'myClass1':'',myChecked2?'myClass2':'',myChecked3?'myClass3':'']">
<h3>入我相思门,知我相思苦,长相思兮长相忆,短相思兮无穷极</h3>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
myChecked1:false,
myChecked2:false,
myChecked3:false
}
})
</script>
</body>
</html>
也可以把class样式类myClass定义为Vue实例中的一个数据属性也可以实现此效果,具体实现代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用v-bind通过数组绑定多个class案例</title>
<script src="../BLBL笔记/lib/vue.min.js"></script>
<style>
.myClass1{
font-style: italic;
}
.myClass2{
text-decoration: underline;
}
.myClass3{
font-family: "隶书";
}
</style>
</head>
<body>
<div id="app">
<label><input type="checkbox" v-model = "myChecked1">斜体</label>
<label><input type="checkbox" v-model = "myChecked2">下划线</label>
<label><input type="checkbox" v-model = "myChecked3">隶书</label>
<br /><br />
<div v-bind:class="[myChecked1?myClassA:'',myChecked2?myClassB:'',myChecked3?myClassC:'']">
<h3>入我相思门,知我相思苦,长相思兮长相忆,短相思兮无穷极</h3>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
myChecked1:false,
myChecked2:false,
myChecked3:false,
myClassA:'myClass1',
myClassB:'myClass2',
myClassC:'myClass3'
}
})
</script>
</body>
</html>