Vue.js基础学习之class与样式绑定
程序员文章站
2022-05-26 09:33:21
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧:
&l...
打着巩固 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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 详解Angular 4.x 动态创建组件
下一篇: mysql having用法解析