有关Vue.js中的v-model的说明

首先如下代码使用v-model可以实现数据的绑定，也就是说我们在输入框中输入什么数据，对应的<span>标签中就会显示什么数据<body><div id="app"><input type="input" v-model="url" &amp

十木禾

18797人浏览 · 2018-03-06 14:29:09

十木禾 · 2018-03-06 14:29:09 发布

首先如下代码使用v-model可以实现数据的绑定，也就是说我们在输入框中输入什么数据，对应的<span>标签中就会显示什么数据

<body>
  <div id="app">
    <input type="input" v-model="url" >
    <br/>
    <span>{{url}}</span>
  </div>

  <script>
    var v = new Vue({
      el: '#app',
      data: {
        url: "Hello World"
      }
    })
  </script>
</body>

这一点貌似很像Angular中的ng-model，但是Angular是双向数据绑定的，而我们的Vue是单项数据流的，所以说v-model实际上只是一种语法糖

上面的代码<input type="input" v-model="url" >实际上是如下的写法的简写

    <input type="input" v-bind:value="url" v-on:input="url=$event.target.value">

有于 Vue.js对于最常用的两个指令v-bind:和v-on:设置了简写规则，所以上面的代码可以更加简化

    <!-- v-bind: -> :    &    v-on: -> @ -->
    <input type="input" :value="url" @input="url=$event.target.value">

上面这段代码的意思是，首先将当前输入框里面的值更新为url的值，然后如果当前的输入框有新的内容输入，响应相应的事件，将url的值设置为当前输入框里面的值。

详细可以查看如下代码的显示差异

    <input type="input" v-model="url">
    <input type="input" :value="url" @input="url=$event.target.value">
    <input type="input" @input="url=$event.target.value">

这个时候如果我们想将其用于其他的input组件上面时，对于类似于checkbox button radio等组件的时候，其并没有相应的input事件，那么应该要怎样解决呢？

我们在知道了v-model的原型的时候，这个问题就非常的容易解决了，可以将代码写成如下的形式：

    <input type="button" :value="attr" @click="attr = $event.target.value" >
    <input type="radio" name="t-url" :value="url" @change="url = $event.target.checked" >

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^