Vue v-model

代元培

于 2020-10-15 19:54:33 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： v-model 双向数据绑定

本文链接：https://blog.youkuaiyun.com/sosemseo/article/details/109104118

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个实例展示了如何在Vue.js中使用v-model指令实现input和textarea元素的双向数据绑定。v-model根据控件类型自动更新元素，允许实时同步用户输入与应用程序状态。示例中，message和message2分别与input和textarea绑定，展示了一个简单的Vue应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　你可以用v-model指令在表单控件元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。

　　实例中演示了input和textarea元素中使用v-model实现双向数据绑定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
	
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'daiyuanpei',
	message2: '代元培\r\nhttp://www.sosemseo.com'
  }
})
</script>
</body>
</html>