查看“Vue从入门到实战:绑定HTML class”的源代码
←
Vue从入门到实战:绑定HTML class
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==背景== HTML元素有两个设置样式的属性,class和style, 在Vue.js中可以用v-bind指令来处理它们,并做了增强。 ==对象语法== 可以给v-bind:class传递一个对象,以动态地切换class <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class绑定</title> <style> .static { border: solid 2px black; } .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id = "app"> <div class="static" v-bind:class="{ active: isActive }"></div> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { isActive: true, } }); </script> </body> </html></nowiki> 粗体显示的代码中active这个class存在与否取决于数据属性isActive的值,isActive 计算为真时则这个样式起作用 也可以在对象中传入更多属性来动态切换多个class.此外,v-bind:class也可以和普通的class属性一起使用 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class绑定</title> <style> .static { border: solid 2px black; } .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id = "app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { isActive: true, hasError: false, } }); </script> </body> </html> </nowiki>
返回至
Vue从入门到实战:绑定HTML class
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息