Vue.js 样式绑定(1)
2023-09-11 14:22:19 时间
demo
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Vue </title> 6 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 7 <style> 8 .text-danger { 9 background: blue; 10 } 11 .active { 12 width: 100px; 13 height: 100px; 14 background: antiquewhite; 15 } 16 17 </style> 18 </head> 19 <body> 20 <div id="app"> 21 <div v-bind:class="[activeClass, errorClass]"></div> 22 </div> 23 24 <script> 25 new Vue({ 26 el: '#app', 27 data: { 28 /* 后面的覆盖前面的样式*/ 29 errorClass: 'text-danger', 30 activeClass: 'active' 31 } 32 }) 33 </script> 34 </body> 35 </html>
效果:
2018-03-20 13:36:35
相关文章
- Vue笔记:vue-router
- JS框架_(JQuery.js)模拟刮奖
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- [Vue-rx] Stream an API using RxJS into a Vue.js Template
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
- vue.js3: 从详情页返回列表页,显示跳转前列表而不是第一页(vue@3.2.26)
- vue.js 3.2.22:平滑回到顶部
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- ubuntu21.04(linux):安装node(14.17.1)和vue.js3.1环境
- vue-router动态路由控制
- vue elementUI表单输入时触发事件@input
- 怎样在vue中安装、配置vue-axios|axios
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Vue+TS/Typescript:Property does not exist on type ‘(() => any) | ComputedOptions<any>‘
- 177:vue+openlayers 加载多种形式Esri地图
- vue脚手架基础demo
- Vue:第一个vue-cli项目