【Vue】零基础学习Vue: 第17课 Vue的v-bind指令使用与设置及改变标签样式
2019-06-29 16:58
344 查看
v-bind指令 给标签绑定vue中定义的属性 :
v-bind 缩写 ":"
通过缩写 " : "给标签绑定class属性名称:
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <style> .bbb{ width:200px; height:200px; background-color:red; } .ccc{ width:200px; height:200px; border: 10px solid green; } </style> </head> <body> <div id="app"> <!-- class="arr"给添加class名 :class=bbbobj设置class名是否启用 不设置默认fasle不启用 --> <div class="arr" :class=bbbobj >啦啦啦</div> </div> <script> let vm = new Vue({ el:"#app", data: { bbbobj:{ bbb:true, ccc:true }, //arr内的组员对应css样式中的class名 arr:["bbb","ccc"] } }) </script> </body> </html>
运行结果如下:
还可以通过style属性直接设置属性:
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 直接设置属性样式 --> <div :style="aaa" >啦啦啦</div> </div> <script> let vm = new Vue({ el:"#app", data: { aaa:{ width:"200px", height:"200px", backgroundColor:"pink" } } }) </script> </body> </html>
运行结果如下:
相关文章推荐
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- 5.3.vue入门基础学习笔记-基础指令介绍(属性绑定v-bind)
- 使用js改变DOM样式的三种方式 - 动态创建style标签
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- android基础学习之有没有标签基础设置
- Vue的基础认知一---构建环境/v指令的使用
- HTML&CSS基础学习笔记1.27-灵活地使用样式
- Bootstrap基础2——基本标签,样式使用
- 【每日学习Mybatis中基础】trim标签使用
- css基础 设置div标签 宽度 边框线颜色样式 div中文本居中 div块在网页中居中 div中内容距边框线的距离
- 使用<span>标签为文字设置单独样式
- vue.js 中v-bind指令的使用
- css基础 并集选择器 多个标签用逗号隔开,使用相同的样式
- Layui 在使用Layui的select标签的时候重新赋值样式没改变,但是数值改变了
- 【VC++ 中使用ADO操作数据库学习笔记】 基础环境的设置
- css基础 设置所有h1标签的 文本颜色 对齐方式 边框样式 背景颜色
- 1)复选框中文字在左边;2)水平滚动条最小值为4、最大值为72;且在窗体Load事件中通过代码设置;3)单击任何复选框,标签上文字样式都发生变化;4)单击任意单选按钮,标签上文字字体都发生改变;5)拖
- vue学习笔记之指令v-text && v-html && v-bind详解
- Html中<Hr>标签、样式的使用和自定义设置
- vue学习第2天,基础知识,v-bind v-on v-if v-for v-model v-html computed watch methods