vue - vue表单中v-model和:value的区别
vue表单中v-model和:value的区别
·
记录一下在项目中发现vue表单元素中v-model和:value使用中的一个区别;
首先v-model和:value功能是一样的都能实现数据的双向绑定;但是在页面的渲染过程中会有一些区别
区别:
- v-model在渲染的时候不能写表达式;
- :value在渲染时可以写成表达式的形式,
便于对数据展示的二次转换
;
下面来看一下这个简单的案例:
使用:value
age可以写成一个表达式或直接在后面拼接(:value="age +'岁' " )
;使用v-model只能写成一个固定的值,否则会报:'v-model' directives require the attribute value which is valid as LHS
,意思是左边需要一个有效的属性值;
<div class="valueModel">
v-model使用:<input type="text" class="age" v-model="age" /> <br />
:value使用 :<input type="text" class="age" :value="age <10 ? funAge(age) : age" />
</div>
<script>
data(){
return {
age: 10,
}
},
methods(){
funAge(age){
console.log(age);
return `0${age}岁`
},
}
</script>
效果图:
更多推荐
已为社区贡献9条内容
所有评论(0)