vue.js之v-model与v-once
v-model指令( 双向绑定 )
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。
<div id="app">
<input v-model="message">
<p>输入:{{ message }}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message:''
}
});
</script>
Vue 是单项数据流,v-model 只是语法糖而已(第一行的代码其实只是第二行的语法糖。):
<input v-model="message" />
<input v-bind:value="message" v-on:input="message = $event.target.value" />
观察语法糖和原始语法那两行代码,可以得出一个结论:
在给元素添加 v-model 属性时,默认会把 value 作为元素的属性,然后把 ‘input’ 事件作为实时传递 value 的触发事件
v-once 指令
它的特点是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。
<div id="app">
<input v-model.lazy="message">
<p v-once>输入:{{ message }}</p>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
message:'test'
}
});
</script>
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499283.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步