本篇讲 vue 通过数据去进行 dom 样式的绑定操作, 主要分为 字符串, 数组, 对象等方式, 这个非常好理解, 凭着我们朴素的情感就能一步领悟到位的, 就还是演示一段吧.
字符 & 数组 & 对象
<!DOCTYPE html>
<html lang="en">
<head>
<title> 样式相关 </title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
classString: 'blue',
classArray: ['red', 'green', { brown: false}],
classObject: {
red: true,
green: true,
brown: true
}
}
},
template: `
<div :class="classString">字符串</div>
<div :class="classArray">数组</div>
<div :class="classObject">对象</div>
<test class="blue" />
`
})
// 注册一个子组件 test 并被父组件 app 在其 template 中进行调用
app.component('test', {
template: `
<div :class="$attrs.class">one</div>
<div>two</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
最后来小结一波用 数据去控制样式主要有:
- 通过 :class="string" 以字符串的方式进行样式绑定
- 通过 :class="array" 以数组的方式进行样式绑定
- 通过 :class="object" 以对象的方式进行样式绑定
- 通过 :style="classObject" 以行内样式的方式进行样式绑定
这些内容都是非常简单易懂的, 就不再做过的介绍啦, 自己练练就可以测试出来的.
标签：样式,app,绑定,语法,vue3,true,class,red From： https://www.cnblogs.com/chenjieyouge/p/16631427.html