概述
一、使用class样式
1、数组
<h2 :class=['blue','small']>哈哈哈我是个h2</h2>2、数组中使用三元表达式
<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>
3、数组中嵌套对象
在数组中用嵌套对象来代替三元表达式，提高代码可读性
<h2 :class="['blue','small',{'active':isactive}]">哈哈哈我是个h2</h2>
4、直接使用对象
在为class使用v-bind绑定对象时，对象的属性是类名。
对象的属性可带引号或不带引号
属性的值是一个标识符
<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>
【代码实现】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.blue{
color: cornflowerblue;
}
.small{
font-weight: 100;
}
.active{
font-style: italic;
color: darkmagenta;
}
</style>
</head>
<body>
<div id="app">
<h2 :class=['blue','small']>哈哈哈我是个h2</h2>
<br />
<h2 :class="['blue','small',isactive?'active':'']">哈哈哈我是个h2</h2>
<br />
<h2 :class="['blue','small',{'active':isactive}]">哈哈哈我是个h2</h2>
<br />
<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>
<h2 :class="classObj">哈哈哈我是个h2</h2>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isactive:false,
classObj:{blue:true,small:true,active:true}
},
methods:{}
})
</script>
</body>
</html>
【实现效果】
二、使用内联样式
1、在元素上通过:style的形式写样式
<h2 :class="{blue:true,small:true,active:true}">哈哈哈我是个h2</h2>
2、降样式对象定义到data中，并直接引用到:style中
先在data上定义样式：
data:{
classObj:{blue:true,small:true,active:true}
},再在元素中，通过属性绑定，绑定元素样式：
<h2 :class="classObj">哈哈哈我是个h2</h2>3、在:style中通过数组，引用多个data上的样式对象
先在data上定义样式：
data:{
classObj1:{blue:true,small:true,active:true},
classObj2:{active:true}
},再在元素中，通过属性绑定，绑定元素样式：
<h2 :class="[classObj1,classObj2]">哈哈哈我是个h2</h2>最后
以上就是小巧树叶为你收集整理的Vue · 通过属性绑定为元素设置样式一、使用class样式二、使用内联样式的全部内容，希望文章能够帮你解决Vue · 通过属性绑定为元素设置样式一、使用class样式二、使用内联样式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复