Vue-(十)表單綁定

10-1.文字輸入：text input與textarea (影片)

單行文字綁定，用input

• 大括號雙向綁定

  <div id="app">
    <input type="text" v-model="msg"></input>
    <h1>{{msg}}</h1>
  </div>

new Vue({
  el:"#app",
  data:{
    msg:'',
  },
})

• input事件偵聽
  該元素的value用動態綁定，當input事件發生時，執行change函式

  <div id="app">
    <input type="text" :value="msg" @input="change"></input>
    <h1>{{msg}}</h1>
  </div>

event.target找到事件發生的元素，其value則是user剛剛輸入的資料

new Vue({
  el:"#app",
  data:{
    msg:'',
  },
  methods:{
    change(event){
      this.msg = event.target.value;
    }
  }
})

多行文字綁定，用textarea

<div id="app">
  <textarea v-model="msg"></textarea>
  <h1>{{msg}}</h1>
</div>

但是換行字元’\n’無法被反映到h1標籤中，因此可以改用pre標籤(preserve)

<div id="app">
  <textarea v-model="msg"></textarea>
  <pre>{{msg}}</pre>
</div>

或是在css中定義

<div id="app">
  <textarea v-model="msg"></textarea>
  <h1>{{msg}}</h1>
</div>

h1{
  white-space: pre;  
}

---

10-2.打勾按鈕：checkbox (影片)

綁定單個屬性boolean值

<div id="app">
  <input type="checkbox" v-model="status">Agree</input>
  <br/>
  <h3>{{status}}</h3>
  <br/>
  <button @click="submit">Submit</button>
</div>

new Vue({
  el:"#app",
  data:{
    status:false,
  },
  methods:{
    submit(){
      if(this.status){
        alert("Success!");
      }else{
        alert("Please agree first!");
      }
    }
  }
})

綁定至array中

<div id="app">
  <h2>請選擇可以送達的時間：</h2>
  <input id="optA" type="checkbox" v-model="options" value="Morning"/>
  <label for="optA">Morning</label>
  <input id="optB" type="checkbox" v-model="options" value="Afternoon"/>
  <label for="optB">Afternoon</label>
  <input id="optC" type="checkbox" v-model="options" value="Evening"/>
  <label for="optC">Evening</label>
  <br/>
  <h3>{{options}}</h3>
</div>

new Vue({
  el:"#app",
  data:{
    options:[],
  },
})

---

10-3.圓點單選按鈕：radio (影片)

<div id="app">
  <input id="female" type="radio" v-model="gender" value="f"/>
  <label for="female">Female</label>
  <input id="male" type="radio" v-model="gender" value="m"/>
  <label for="male">Male</label>
  <input id="other" type="radio" v-model="gender" value="o"/>
  <label for="other">Other</label>
  <h2/>{{gender}}</h2>
</div>

new Vue({
  el:"#app",
  data:{
    gender:'',
  },
})

---

10-4.下拉選單：select與option (影片)

綁定單一個屬性

若沒有定義option中的value，會自動將option標籤中的內容當作value

<div id="app">
  <select v-model="year">
    <option disable value="">Select Year</option>
    <option value="17">2017</option>
    <option>2018</option>
    <option>2019</option>
  </select>
  <h2>{{year}}</h2>
</div>

new Vue({
  el:"#app",
  data:{
    year:'',
  }
})

綁定至array中，使用multiple

<div id="app">
  <select v-model="years" multiple>
    <option disable value="">Select Year</option>
    <option value="17">2017</option>
    <option>2018</option>
    <option>2019</option>
  </select>
  <h2>{{years}}</h2>
</div>

new Vue({
  el:"#app",
  data:{
    years:[],
  }
})

使用v-for綁定option

<div id="app">
  <select v-model="selectedYear">
    <option disable value="">select year</option>
    <option v-for="item in years">{{item}}</option>
  </select>
  <h2>{{selectedYear}}</h2>
</div>

new Vue({
  el:"#app",
  data:{
    years:[2017,2018,2019],
    selectedYear:'',
  }
})