Vue.js 从零开始:v-model

表单类型是网页很常见的呈现方式,表单元素有文字框<input><textarea><select>...等,用v-model的特性可以做到资料双向绑定的功能,以下开始介绍。


input 文字框

<div id="demo">
  <input type="text" v-model="message" placeholder="input text">
  {{ message }}
</div>
const vm = Vue.createApp({
  data() {
    return {
      message:'Hello Vue3',
    }
  }
});

vm.mount("#demo");

起手式在 input 加上 v-model="message" ,此时这输入框文字有变动时,data 的 message 也会更新。


textarea 文字方块

<div id="app">
  <h2>{{ message }}</h2>
  <textarea v-model="message"></textarea>
</div>
const vm = Vue.createApp({
  data() {
    return {
      message:'hello Vue!',
    }
  }
}).mount('#app');

<textarea v-model="message"></textarea>不能再放{{ }}会无法同步


checked 选择框

<div id="demo">
  <input type="checkbox" id="one" value="one" v-model="checked">
  <label for="one">one</label>
  <input type="checkbox" id="two" value="two" v-model="checked">
  <label for="two">two</label>
  <input type="checkbox" id="three" value="three" v-model="checked">
  <label for="three">three</label>
  <br>
  <h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
  data() {
    return {
      checked: [],
    }
  }
}).mount('#demo');

所有checked都要绑定一样的v-model="checked",且data一定要是阵列,点击第二个checked,画面呈现:
https://ithelp.ithome.com.tw/upload/images/20210921/201183477uXXa2OdBb.png

checked 单选

<div id="demo">
  <input type="checkbox" id="one" value="one" v-model="checked">
  <label for="one">Click Me!</label>
  <br>
  <h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
  data() {
    return {
      checked: false,
    }
  }
}).mount('#demo');

data 的 checked 改为 false,预设就会没打勾,当点选 checked 会再转为 true,改为打勾状态 。


radio 单选框

<div id="demo">
  <input type="radio" id="one" value="1" v-model="checked">
  <label for="one">one</label>
  <input type="radio" id="two" value="2" v-model="checked">
  <label for="two">two</label>
  <input type="radio" id="three" value="3" v-model="checked">
  <label for="three">three</label>
  <br>
  <h3>checked data:{{ checked }}</h3>
</div>
const vm = Vue.createApp({
  data() {
    return {
      checked: 1,
    }
  }
}).mount('#demo');

checked多选框很相似,差别在於透过value指定他的值,点选时data里的checked也同步更新为value的值:
https://ithelp.ithome.com.tw/upload/images/20210921/201183471xyvE44CbH.png


select 下拉式选单

<div id="demo">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>北部</option>
    <option>中部</option>
    <option>南部</option>
  </select>
  <br>
  <h3>selected:{{ selected }}</h3>
</div>
const vm = Vue.createApp({
  data() {
    return {
      selected: '',
      
    }
  }
});

vm.mount('#demo');

v-model 必须放在 <select> 标签里,如果放在 <option> 标签 ,会导致画面虽然有更新,但 data 里的selected根本没有更新,维持空字串的状态:
https://ithelp.ithome.com.tw/upload/images/20210921/201183477rz6khwxBM.png


v-model 解析

https://ithelp.ithome.com.tw/upload/images/20210922/20118347Z5LtAfg5NU.png
大家现在都知道 v-model 是双向绑定,只要 input 输入什麽值, data 也会跟着更动,这都是靠ViewModel同时帮我们处理 DOM 的监听和资料的绑动,v-model是对功能没有影响,但更方便的使用,也就是语法糖,那我们来还原他本来的写法:

<input :value="searchText" @input="searchText = $event.target.value">

input 绑定 value 属性後,在对 input 事件监听,触发的同时,$event.target.value 回传到 data 里的 searchText 属性。

methods 写法:

  <div id="app">
      <input :value="text" @input="input($event)">
      <h1>{{ text }}</h1>
  </div>
const vm = Vue.createApp({
  data() {
    return {
      text: 'v-on,v-bind',
    }
  },
  methods:{
    input(event) {
      this.text = event.target.value;
    },
  }
});

vm.mount('#app');

1.在 methods 宣告一个 input监听。
2.当 @input 触发时 $event (事件物件)传回 methods 的 input(event)。
3.event(原生事件).target(获取该触发事件的元素 button ).value再回传给 Datatext

参考资料

Vue.js 的黑魔法:指令
Vue.js 官网


<<:  [Day 10] Response

>>:  连续 30 天 玩玩看 ProtoPie - Day 10

Day07 - Docker 101 容器操作篇

前言 Docker 的学习主要可分为容器操作及 Image 建置两部分,今天透过一些简单的 Lab ...

Day 17 Azure Cosmos DB API for MongoDB- 找个地方放资料

Azure Cosmos DB API for MongoDB- 找个地方放资料 MongoDB是一...

中华电信 VS 元大台湾50

昨天跟朋友聊到中华电信,想说写篇文章来分析一下众多投资人喜爱的标的。 我後来跟大家询问一下,发现好多...

Innodb资料页结构-Part1(使用者纪录、空闲空间、页面中最小与最大的纪录)

前文提到页是Innodb的基本存取单位,一般为16kb,Innodb为了实现功能其实设计了许多不同类...

Day15:[搜寻演算法]Linear Search - 线性搜寻法

线性搜寻法可以说是最容易理解的搜寻演算法了,相信大家都有过类似的经验,在图书馆里想在书架上找一本书...