vue.js中的v-model
<html>
<head></head>
<body>
<div id="app">
<!-- msg为展示的值，从其id所对应的data中取值 -->
<p>{{msg}}</p><br>
<!-- 此处为输入框，用v-model绑定msg,输入框中输入的值决定msg的值-->
输入：<input type="text" v-model='msg'>
</div>
</body>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script >
new Vue({
el:'#app',
data:{
msg:"hi"
}
})
</script>
</html>
解释：
<input type="text" v-model='msg'>
v-model这个指令只能用在<input> , <select> , <textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。
网友评论