vuejs之v-model

发布时间：2020-12-16 23:03:02 所属栏目：百科来源：网络整理

导读：看一个例子： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script / body div id ="app" input type ="text" v-model ="message" @keyup.enter ="getMsg" ="button" value ="修改" @click ="setMsg" h2 {{message}} div var ap

看一个例子：

<html>

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

效果：

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

下面数据同步更新。

点击修改：

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

说明：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!