vuejs之v-model

时间:2022-07-24
本文章向大家介绍vuejs之v-model，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

看一个例子：

<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <input type="text" v-model="message" @keyup.enter="getMsg">
    <input type="button" value="修改" @click="setMsg">
    <h2>{{message}}</h2>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: '我是黄色',
      },
      methods: {
        getMsg: function () {
          alert(this.message);
        },
        setMsg: function () {
          this.message = "修改了message";
        },
      },
    })
  </script>
</body>

</html>

效果：

修改输入框里面的值，不需要点修改：

下面数据同步更新。

点击修改：

输入框的值和下面的值同步更新。

说明：

v-model指令的作用就是便捷地设置和获取表单元素的值。

绑定的数据会和表单元素值进行关联。

其中一个改变都会导致另一个的改变。

随机文章
Javascript知识点必读
最近更新