vue指令的v-model小实例分享

 v-model 是 Vue.js 中一个非常有用的指令，它主要用于在表单元素上创建双向数据绑定。这意味着，当用户在输入框中输入内容时，数据会实时更新到 Vue 实例中；同时，如果 Vue 实例中的数据发生变化，输入框的内容也会自动更新。

下面是一个简单的 v-model 使用实例：
html模板：

<div id="app">    
<input type="text" v-model="message" placeholder="输入一些文字...">    
<p>你输入的文字是: {{ message }}</p>    
</div>    

Vue 实例：

new Vue({ 
el: '#app', 
data: { 
message: '' 
} 
})

​

• 我们创建了一个 Vue 实例，并绑定到 id 为 app 的元素上。
• 在 data 中，我们定义了一个名为 message 的属性，初始值为空字符串。
• 在输入框 <input> 上，我们使用了 v-model 指令，并将其绑定到 message 属性上。
• 当用户在输入框中输入文字时，message 属性的值会自动更新。
• 同时，{{ message }} 插值表达式会实时显示 message 的值，所以用户在页面上也能看到他们输入的内容。

这个简单的例子展示了 v-model 如何实现双向数据绑定，使得表单元素和 Vue 实例中的数据保持同步。在实际应用中，v-model 可以与各种表单元素一起使用，如 input、textarea、select 等，并且还可以与计算属性和方法结合使用，以实现更复杂的逻辑。