Vue.js实现Class属性的对象绑定方法代码
前言:
Vue.js实现Class属性的对象绑定方法代码，如果对你有帮助就看看吧。
正文:
vue.js自行导入即可使用，class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<!-- author:吴默然 this:2020年9月10日 url:aidezy.com -->
<style type="text/css">
.yang{
width: 200px;
height: 200px;
background:red;
display: block;
}
.yangshi2{
height: 300px;
background: blue;
display: block;
}
.yangshi3{
height: 300px;
background: yellow;
display: block;
}
</style>
<body>
<div id="el">
<div v-bind:class="{'yang':yang2 , 'yangshi2':yang3}"></div>
</div>
<br>
<div id="el2">
<div v-bind:class="wudak"></div>
</div>
<br>
<div id="el3">
<div v-bind:class="wudak2"></div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#el',
data:{
yang2:true,
yang3:true,
},
});
new Vue({
el:'#el2',
data:{
wudak:{
yang:true,
yangshi2:true,
}
}
});
new Vue({
el:'#el3',
data:{
isacty:true,
errors:{
value:true,
type:'sb',
}
},
computed:{
wudak2:function(){
return{
yang:true,
yangshi2:this.isacty && !this.errors.value,
yangshi2:this.errors && this.errors.type === 'sb',
}
}
}
});
</script>
</html>资源均来自第三方，谨慎下载，前往第三方网站下载 解压密码：123456 解压密码：123456
