码迷,mamicode.com
首页 > 其他好文 > 详细

v-model

时间:2021-06-11 18:49:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:src   div   rgb   info   rgba   return   inpu   语法   意思   

v-model:双数据绑定

 

<template>
  <div id="app">
    <input type="text" v-model="name">
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: 孙艺珍,
      age: 18
    }
  }
}
</script>

以上代码在运行时就可以达到双数据绑定的效果:

技术图片

v-model其实是 value 属性和 input 事件的语法糖,什么意思呢?

如果把 v-model=‘name‘ 替换为 :value=‘name‘ @input="(e)=>name=e.target.value" 效果是一样的

<template>
  <div id="app">
    <!-- <input type="text" v-model="name"> -->
    <input type="text" :value=‘name‘ @input="(e)=>name=e.target.value">
    <p>{{name}}</p>
  </div>
</template>

就是说写了v-model就相当于绑定了value属性和input事件!

 

v-model

标签:src   div   rgb   info   rgba   return   inpu   语法   意思   

原文地址:https://www.cnblogs.com/wuqilang/p/14874774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!