目录

1、文本绑定2、属性绑定3、表单绑定4、判断语句5、循环语句6、常用方法

1、文本绑定

文本绑定使用插值表达式，v-once 属性设置该元素的插值不可变

<div v-once>{{message}}</div>

插值表达式支持JavaScript表达式

<!-- 数学运算 --> <div>{{val + 1}}</div> <!-- 三元表达式 --> <div>{{val===0?'True':'False'}}</div> <!-- 函数运算 --> <div>{{Math.ceil(val)}}</div>

使用过滤器修改插值

<div>{{val | func}}</div>

插入HTML代码

<div v-html="message"></div>

2、属性绑定

使用v-bind实现属性的单向绑定，表达式：v-bind:属性名，可以缩写成:属性名

<div :attr="var"></div> <div :attr="[var1,var2]"></div>

注意点：v-bind不支持驼峰命名，使用:arrt传入时，属性名要使用-分割大小写字符

<div :user-name="var"></div> data: {userName:"xxx"}

使用:attr="{var:bool}"语法决定属性是否生效

<div :attr="{var:bool}"></div> <div :attr="[var1:bool1,var2:bool2]"></div>

样式绑定

vue.js中的变量不能含有-，如果样式中有则改用驼峰命名法，如：margin-top–>marginTop

<div :style="{color:mycolor,fontSize:mysize}">{{message}}</div>

3、表单绑定

对于input表单，使用v-model进行数据双向绑定

<input type="text" v-model="val"/>

单选框选中：绑定的值与它的value相同

<input type="radio" v-model="val" value="1" /> <input type="radio" v-model="val" value="2" />

复选框选中：绑定一个数组，如果value的值存在数组中

<input type="checkbox" v-model="arr" value="1" /> <input type="checkbox" v-model="arr" value="2" /> <input type="checkbox" v-model="arr" value="3" />

4、判断语句

判断是否渲染

<div v-if="bool"></div> <div v-else-if="bool"></div> <div v-else></div>

判断是否显示

<div v-show="bool"></div>

5、循环语句

遍历数组

<li v-for="(value, index) in arr"></li>

遍历对象

<li v-for="(value, key) in object"></li> <li v-for="(value, key, index) in object"></li>

6、常用方法

// 由于JS的限制，Vue不能检测对象属性的变化，如：this.obj[attr] = newAttr，导致视图立即无法更新 // 这时可以使用强制更新来解决 this.$forceUpdate()