如何理解Vue的v-model指令的使用方法

本文主要講解v-model指令，主要包括HTML元素的v-model和組件上的v-model兩種，用四個簡單的案例介紹v-model的使用。

綦江ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

案例一：HTML元素的v-model -輸入框(text)

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app4">
      {{price}}<br>
      <input v-model="price"><!-- 下行注釋的語法糖 -->
      <!-- <input :value="price" @input="price = $event.target.value"> -->
    </div>
    <script>
      new Vue({
        el: '#app4',
        data: {
          price: '20'
        }
      });
    </script>
  </body>
</html>

案例二：定制組件的v-model - 輸入框(text)

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>v-model指令</title>
    <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
  </head>
  <body>
    <div id="app3">
      {{price}}
      <my-input v-model="price"></my-input><!-- 下行注釋的語法糖 -->
      <!-- <my-input :value="price" @input="val => {price = val}"></my-input> -->
    </div>
    <script>
      Vue.component('my-input', {
        template: '<div></span><input type="text" ref="input" :value="value" @input="doThis"/></div>',
        props: {
          value: String
        },
        methods: {
          doThis() {
            this.$emit('input', this.$refs.input.value);
          }
        }
      });
      new Vue({
        el: '#app3',
        data: {
          price: '10'
        }
      });
    </script>
  </body>
</html>

如何理解Vue的v-model指令的使用方法

案例三：定制組件的v-model - 復(fù)選框(checkbox) - 2.2.0 新增

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>v-model指令</title>
      <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
      <div id="app2">
        {{fruit}}<!-- 觀測數(shù)據(jù)變化 -->
        <my-checkbox v-model="fruit.apple" value="apple"></my-checkbox><!-- 下行注釋的語法糖 -->
        <!-- <my-checkbox :checked="fruit.apple" @change="val => {fruit.apple = val}" value="apple"></my-checkbox> -->
      
        <my-checkbox v-model="fruit.peach" value="peach"></my-checkbox><!-- 下行注釋的語法糖 -->
        <!-- <my-checkbox :checked="fruit.peach" @change="val => {fruit.peach = val}" value="peach"></my-checkbox> -->
      </div>
      <script>
        Vue.component('my-checkbox', {
          template: '<div><span>{{value}}</span><input type="checkbox" :checked="checked" @change="doThis" :value="value"/></div>',
          model: {
            prop: 'checked',
            event: 'change'
          },
          props: {
            checked: Boolean,
            value: String
          },
          methods: {
            doThis() {
              this.$emit('change', !this.checked);
            }
          }
        });
        new Vue({
          el: '#app2',
          data: {
            fruit: {//數(shù)據(jù)
              apple: true,
              peach: false
            }
          }
        });
      </script>
    </body>
  </html>

如何理解Vue的v-model指令的使用方法

案例四：定制組件的v-model - 單選按鈕(radio) -2.2.0 新增

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model指令</title>
  <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
  <div id="app">
    {{fruit}}<!-- 觀測數(shù)據(jù)變化 -->
    <my-radio v-model="fruit" value="apple" name="myFruit"></my-radio><!-- 下行注釋的語法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="apple"></my-radio> -->
    
    <my-radio v-model="fruit" value="peach" name="myFruit"></my-radio><!-- 下行注釋的語法糖 -->
    <!-- <my-radio :checked="fruit" @change="val => {fruit = val}" value="peach"></my-radio> -->
  </div>
  <script>
    Vue.component('my-radio', {
      template: '<div><span>{{value}}</span><input :name="name" type="radio" ref="radio" :checked="checked===value" @change="doThis" :value="value"/></div>',
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: String,
        value: String,
        name: String
      },
      methods: {
        doThis() {
          this.$emit('change', this.$refs.radio.value);
        }
      }
    });
    new Vue({
      el: '#app',
      data: {
        fruit: 'peach'//數(shù)據(jù)
      }
    });
  </script>
</body>
</html>

如何理解Vue的v-model指令的使用方法

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：如何理解Vue的v-model指令的使用方法
網(wǎng)頁路徑：http://www.rwnh.cn/article48/pgssep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、動態(tài)網(wǎng)站、微信小程序、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

如何理解Vue的v-model指令的使用方法