AIDE技术官网
AIDEZY.COM

Vue.js实现Class属性的对象绑定方法代码

Vue.js实现Class属性的对象绑定方法代码

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>

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册