基础-系统指令-v-bind基本用法
- 作用: 绑定标签上的任何属性
- 场景: 当标签上的属性是变量/动态/需要改变的
- 用法:
// ID为数据对象中的变量值 <p v-bind:id="ID"></p> // 简写 <p :id="ID"></p>
基础-系统指令-v-bind绑定class(对象)
用法:
绑定class对象语法 :class=“{ class名称: 布尔值}”<p class="obox" :class="{obox:isBn}">内容</p> // isBn为 data选项中的属性
注意
: 绑定class和原生class会进行合并(但是不会合并重复的)
基础-系统指令-v-bind-绑定class(数组)
- 绑定class数组语法 :class=“[a,b]”
- a、b为data属性的key
- data中key对应的value 为class名字
<p :class="[a,b]">内容</p> data:{ a:'obox', b:'left' }
基础-系统指令-v-bind-绑定style(对象)
语法
:style=“{css属性名:属性值}”<p :style="{color:a,fontSize:b}"></p> //a、b为data属性的key data: { a: 'red', b: '30px' },
注意
css属性名 例如 font-size要写成 fontSize 以此类推 原有的style会覆盖
基础-系统指令-v-bind-绑定style(数组)
// 语法: <div :style="[a,b]"></div> // a,b 为data的属性 data: { a: { color: "red" }, b: { fontSize: "30px" } }
注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则
基础-系统指令-v-model-基础用法
作用: 表单元素的绑定
特点: 双向数据绑定
- 数据发生变化可以更新到界面
- 通过界面可以更改数据
v-model
绑定表单元素,会忽略所有表单元素的value
、checked
、selected
特性的初始值- 表单元素会将 Vue 实例的data中的数据作为数据来源,所以应该在
data
选项中声明初始值。// 表单中设置value值没用 v-model会忽略 <input type="text" v-model="msg" value