v-if v-else-if v-else
条件判断。当其为true是会渲染数据和显示dom元素。否则不会显示。
<div v-if="fSize==10">显示true</div>
<div v-else-if="fSize<10">显示else </div>
<div v-else>显示false</div>
文本框中的字符串并没有随着true与false的切换来清空文本框
<div v-if="isShow">
<div>账号</div>
<input name="user" placeholder="请输入账号">
</div>
<div v-else>
<div>邮箱</div>
<input key="a" name="email" placeholder="请输入邮箱">
</div>
<button @click.stop="switchShow">切换</button>
这是因为vue的对DOM进行渲染时会尽可能的去复用元素,而不是去创建新的元素
如果不希望vue去重复使用元素则添加key并保证key不同
v-show 是否显示
其雷同与v-if,true 显示 false不显示
区别:v-show=“false” 会给DOM元素增加样式 display:none。v-if="false"则是不会存在DOM元素
filters 过滤器
与methods 同级,写法相同。
参数+|+过滤器中定义的方法
<td>{{item.price|myPrice}}</td>
filters:{
myPrice(price){
return '$'+price.toFixed(2);
}
}
v-model 表单绑定:数据的双向绑定
表单元素与数据。当其中一个发生变化,另外一个也会发生变化。
例如使用input时。输入框内容会传递给msg,msg会发生变换。等msg发生变化时也会传递给DOM,DOM也会发生响应的改变。
<input v-model="msg">{{msg}}
v-model 绑定单选框
<input type="radio" id="male" name="sex" value="男" v-model="sex">男
<input type="radio" id="female" name="sex" value="女" v-model="sex">女
data:
sex:"男",
v-model 绑定多选框
<input type="checkbox" v-model="isAgree" value="agree">同意
data
isAgree:false,
<input type="checkbox" v-model="books" value="java">java
<input type="checkbox" v-model="books" value="js">js
<input type="checkbox" v-model="books" value="vue">vue
<input type="checkbox" v-model="books" value="c">c
books:[
]
v-model 下拉选择框
<select name="asd" v-model="fruit">
<option value="apple">apple</option>
<option value="pear">pear</option>
<option value="bannana">bannana</option>
</select>
data
fruit:"apple",
<select name="asd" v-model="fruits" multiple>
<option value="apple">apple</option>
<option value="pear">pear</option>
<option value="bannana">bannana</option>
</select>
data
fruits:[]
v-model 修饰符:
默认情况input与数据是双向同步的。
.lazy:当是去焦点或者是回车后才会去同步
默认情况input的中数据都会边都会变成字符串类型
.number:会将内容转为数字类型
trim:去除内容两边的空格