vuejs中v-bind绑定class时的注意事项
2017-07-07 17:33
465 查看
关于v-bind绑定class的实例
作用:可用于不同样式之间的切换
作用:可用于不同样式之间的切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue"></script> <style> .static { font-size: 120px; width: 600px; margin: 0 auto; background-color: yellow; height: 120px; line-height: 120px; text-align: center; } .class-a { color: #FF0000; } .class-b { text-decoration: underline; } </style> </head> <body> <div id="app"> <div v-bind:class="classObject"> 关于class的绑定 </div> </div> <script> var vm = new Vue({ el: '#app', data: { classObject: { //'class-a',不能写成class-a(不带引号);这里的classObject是js对象,而class-b是代表的是一个样式,所以必须写成'class-a',用引号括起来。 //否则这里的class-a只能代表classObject的一个属性名称而已,这样vuejs在初始化时,会报错。 'class-a':true, 'class-b': false } } }); </script> </body> </html>
相关文章推荐
- vuejs中v-bind绑定class时的注意事项
- Vue.js中用v-bind绑定class的注意事项
- Vue.js使用v-bind绑定class时的注意事项
- 使用ControllerAdvice注意事项,Ambiguous @ExceptionHandler method mapped for [class org.springframework.web.bind.MethodArgumentNotValidException]
- VueJS样式绑定v-bind:class
- jQuery的on与bind绑定事件的区别与注意事项
- 使用class.getClassLoader().getResource("")的注意事项
- CLASSPATH的注意事项
- Android 绑定类型服务---其他注意事项
- VueJs中 Class 与 Style 绑定
- 在程序中用new ClassPathXmlApplicationContext()获取Spring的上下文环境注意事项
- 【读书笔记】iOS-头文件导入-@class注意事项
- WCF使用net.tcp绑定时的注意事项
- 将 Spring boot 项目打成可执行Jar包,及相关注意事项(main-class、缺少 xsd、重复打包依赖)
- Asp.NET 4.5 数据绑定新特性 之 通过控件传值过滤数据 之注意事项
- 源码配置bind主从时的注意事项 推荐
- VS 2005环境下使用boost ::bind的一个注意事项
- android中Service的启动,停止,绑定的注意事项
- jQuery后绑定事件注意事项
- angularjs 双向绑定注意事项