【Vue】Select>option選擇題結構 / true(false)-value真假傳值 / v-model.lazy懶惰 / v-model.trim去除空白

選擇題

• select>option
• select和資料串接，然後option的value會傳到select的資料裡

 <h1>請選擇</h1>
        <select name="" id="" v-model="likeperson">
            <option value="" disabled>請選擇</option>
            <option value="小明">小明</option>
            <option value="小黃">小黃</option>
            <option value="小紅">小紅</option>
        </select>
        <br>
  <span>喜歡的人是{{likeperson}}</span>

選擇題（選項放陣列中）

• :value要記得加:
• 把選項放到陣列中，然後渲染多個選項

        <h1>請選擇</h1>
        <select name="" id="" v-model="likeperson2">
            <option value="" disabled>請選擇</option>
            <option v-for="item in alotperson" :value="item">{{item}}</option>
        </select>

alotperson: ['小明', '小黃', '小紅'],

​

true-value / false-value

• input>label結構
• 當資料為true時，value傳男；當資料為false，value傳女

        <h1>性別</h1>
        <input type="checkbox" v-model="sex" true-value="男" false-value="女">
        <label for=" ">{{sex}}</label>

sex: '男'

v-model.lazy

• v-model.lazy可以讓資料在輸入完畢後再顯示

<h4>懶惰</h4>
<h5> {{lazy}}</h5>
<input type="text" v-model.lazy="lazy">

lazy: ''

v-model.trim

• v-model.trim可以ㄅㄚ

        <h4>緊縮</h4>
        <h5> {{lazy}}</h5>
        <input type="text" v-model.trim="lazy">

​