如果要在页面其他部分实时显示我们在input输入框中输入的内容
原生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>
在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>
但是这种写法有点麻烦，可以用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>
原文：https://www.cnblogs.com/zhangcheng001/p/11480614.html