Vue2 动态设置元素类以及样式
1.动态设置类 class
1.1 字符串语法
通过v-bind
绑定元素的class
属性,为其指定一个字符串:
<div v-bind:class="className">class动态绑定</div>
<script>
export default {
data() {
return {
className: 'app'
}
}
}
</script>
此时我们可以通过改变className
变量来切换样式。注意,当className
为 ''
时,这个class属性仍然会被添加到真实DOM上,只不过没有值。
1.2 对象语法
通过v-bind
绑定元素的class
属性,为其指定一个对象:
<div v-bind:class="{active: isActive}">class动态绑定</div>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>
在上面的例子中,这个元素身上的class
属性是否包含active
,取决于数据isActive
的值。当isActive
为true
时,渲染结果如下:
<div class="active">class动态绑定</div>
而当我们动态修改isActive
的值时,该元素的class
属性也会动态更新,将值改为false
:
<div class>class动态绑定</div>
进一步地,对象中可以传入多个className
:
<div v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true
}
}
}
</script>
此时的渲染结果为:
<div class="active danger">class动态绑定</div>
当然,v-bind
绑定的class
属性也可以与普通的class
并存:
<div class="common" v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true
}
}
}
</script>
此时渲染结果为:
<div class="common active danger">class动态绑定</div>
另外,当需要动态绑定的className
太多时,不需要内联定义在模板中,此时可以选择在data中定义一个对象,或使用计算属性:
<div class="common" v-bind:class="classObj1">class动态绑定 --- data中定义对象</div>
<div class="common" v-bind:class="classObj2">class动态绑定 --- 计算属性</div>
<script>
export default {
data() {
return {
isActive: true,
isDanger: true,
classObj1: {
active: true,
danger: true
}
}
},
computed: {
classObj2() {
return {
active: this.isActive,
danger: this.isDanger
}
}
}
}
</script>
1.3 数组语法
通过v-bind
绑定元素的class
属性,为其指定一个数组:
<div v-bind:class="[className, 'common']"></div>
<script>
export default {
data() {
return {
className: 'app'
}
}
}
</script>
此时的渲染结果:
<div class="common app"></div>
使用数组,里边的值可以是响应式的也可以是普通类名,同时也可以使用三元表达式,甚至可以结合上面的对象语法使用:
<div v-bind:class="[className, 'common', isActive ? 'active': '', { danger: isDanger }]"></div>
<script>
export default {
data() {
return {
className: 'app',
isAcive: true,
isDanger: true,
}
}
}
</script>
2.动态绑定样式 Style
2.1 字符串语法
通过v-bind
绑定元素的style
属性,为其指定一个字符串:
<div v-bind:style="style">style动态添加</div>
<script>
export default {
data() {
return {
style: 'color: red'
}
}
}
</script>
2.3 对象语法
通过v-bind
绑定元素的style
属性,为其指定一个对象,对象语法十分直观 —— 看着非常像 CSS
,但其实是一个js
对象。CSS
名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名。:
<div v-bind:style="{ color: color, fontSize: fontSize + 'px', (padding-left): paddingLeft }"></div>
<script>
export default {
data() {
return {
style: 'red',
fontSize: 30,
paddingLeft: '10px'
}
}
}
</script>
既然可以使用对象语法,那么同样的,style
也可以在data
中定义一个对象或者使用计算属性。文章来源:https://www.toymoban.com/news/detail-680697.html
2.3 数组语法
通过v-bind
绑定元素的style
属性,为其指定一个数组,数组中可以为多个样式对象:文章来源地址https://www.toymoban.com/news/detail-680697.html
<div v-bind:style="[styleObj, overridingStyles]"></div>
<script>
export default {
data() {
return {
color: 'red',
fontSize: '30px',
overridingStyles: {
color: 'blue',
fontSize: '40px'
}
}
},
computed: {
styleObj() {
return {
color: this.color,
fontSize: this.fontSize
}
}
}
}
</script>
到了这里,关于【Vue】动态设置元素类以及样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!