Vue的学习之路五：v-model

最新推荐文章于 2024-06-02 11:07:16 发布

亥虫

最新推荐文章于 2024-06-02 11:07:16 发布

阅读量119

点赞数

分类专栏： # Vue 文章标签： vue html5 javascript

本文链接：https://blog.csdn.net/weixin_39020133/article/details/106289377

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

<body>
    <div id="app">
      <h4>{{msg}}</h4>
      <!-- v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定 -->
      <input type="text" :value="msg">
      <!-- 使用 v-model 指令，可以实现表单元素和Model中数据的双向数据绑定 -->
      <!-- 注意：v-model 只能运用在表单元素中 input(radio, text, address, email...) select checkbox textarea -->
      <input type="text" v-model="msg">
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: '大家都是好学生',
        },
        methods: {},
      })
    </script>
  </body>

介绍Vue的双向数据绑定指令v-model

v-bind：只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
v-model：可以实现表单元素和Model中数据的双向数据绑定
v-model注意事项：只能运用在表单元素中input(radio, text, address, email...) select checkbox textarea

亥虫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习之路五：v-model

<body> <div id="app"> <h4>{{msg}}</h4>  <input type="text" :value="msg">  <!--
复制链接

扫一扫