Vue.js基础学习之class与样式绑定

时间：2021-05-26

打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究，相比前一篇的 demo，本次内容多了各种样式在里面，变得稍微花哨了些，话不多说，直接上代码吧：

<html><head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { font-family: Times, "Times New Roman", serif;} .static.active {color: green; font-size: 35px;} div.text-danger {color: red;font-size: 25px;} div.active {color: blue;font-family: Verdana;} </style> <script src="./vue.min.js"></script></head><body><div id="app"> <!-- Create an instance of the todo-item component --> <todo-item></todo-item></div><div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> <p>class property set.</p></div><div id="app3" v-bind:class="[activeClass,errorClass]"> <p>group class property set.</p></div><div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']"> <p>三元表达式加样式</p></div><div id="app5"> <my-component v-bind:class="{ active: isActive }"></my-component> </div><div id="app6"> <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</p> <p v-bind:style="styleObject">对象样式绑定</p></div><script>Vue.component('todo-item', { template: '<p>todo test.</p>'})// 一定要实例化才能用var app = new Vue({ el: '#app'})// 用类选择器构造一个Vue对象并绑定额外的class属性var app2 = new Vue({ el: '.static', data: { isActive: false, hasError: true }})// 数组语法加 class (因为是从下往上拿样式，所以text-danger的color样式被覆盖)var app3 = new Vue({ el: '#app3', data: { activeClass: 'active', errorClass: 'text-danger' }})var app4 = new Vue({ el: '#app4', data: { isActive: true }})Vue.component('my-component',{ template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'})var app5 = new Vue({ el: '#app5', data: { isActive: true }})// 绑定内联样式var app6 = new Vue({ el: '#app6', data: { activeColor: '#FF00FF', fontSize: 30, styleObject: { color: '#585858', fontSize: '25px' } }})</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章