参考文章:https://www.cnblogs.com/cn-oldboy/p/12689186.html
v-model 是vue的一个语法糖,用于在表单控件或者在组件上创建双向绑定。双向绑定即修改model后界面view会自动更新,如果用户更新了view,model的数据也会自动更新。
1.原生js实现方式
<h4 id="h4"></h4>
<input type="text" id="input" oninput="fun()">
<script>
function fun() {
var content = document.getElementById('input').value;
document.getElementById('h4').innerHTML = content;
}
</script>
2.vue中的原生写法
<div id="test">
<h4>{{ val }}</h4>
<input type="text" :value='val' @input="fun">
</div>
<script>
const vm = new Vue({
el: "#test",
data: {
val: 'k',
},
methods: {
fun(e) {
this.val = e.target.value;
}
}
})
</script>
3.vue中的简写方式 v-model
<div id="test">
<h4>{{ val }}</h4>
<input type="text" v-model='val'>
</div>
<script>
const vm = new Vue({
el: "#test",
data: {
val: '',
},
})
</script>