一文读懂vue中的v-model-创新互联

这篇文章运用简单易懂的例子给大家介绍一文读懂vue中的v-model，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为安定企业提供专业的网站建设、网站制作，安定网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

1. v-model原理

vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分：

通过props设置子组件的状态
通过监听子组件发出的事件改变父组件的状态，从而影响子组件的props值
通过以上两个部分，实现了父组件的状态和子组件状态进行了绑定的效果。

1.1 demo

v-model使用示例

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>v-model示例</title>
 <script type="text/javascript" src="vue.js"></script>
 </head>

 <body>
 <div id="app">
  <div>这里是父组件的状态:</div>
  <div >{{content}}</div>
  <Child v-model="content"></Child>
 </div>

 <template id="input">
  <div>
  <div>这里是子组件的输入区域:</div>
  <input :value="value" @input="contentChange" />
  </div>
 </template>

 <script type="text/javascript">
 var Child = {
  template: "#input",
  props: {
  value: {
   type: String,
   required: true
  }
  },
  methods: {
  contentChange(value){
   this.$emit("input", value.target.value);
  }
  }
 };

 var vueInstance = new Vue({
  el: "#app",
  components: {Child},
  data: {
  content: ""
  }
 })
 </script>
 </body>
</html>

当前文章：一文读懂vue中的v-model-创新互联
链接地址：https://www.cdcxhl.com/article8/ceodip.html

成都网站建设公司_创新互联，为您提供外贸网站建设、服务器托管、虚拟主机、App开发、企业建站、定制网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容