表單輸入繫結的學習
阿新 • • 發佈:2021-05-30
<div class="hello"> <div> <div> <p>.number修飾符:</p> <input type="text" v-model.number="msg" placeholder="請輸入"> <label>{{msg}}</label> <p>.lazy修飾符:</p> <input type="text" v-model.lazy="msg" placeholder="請輸入"> <label>{{msg}}</label> <p>.trim修飾符:</p> <input type="text" v-model.trim="msg" placeholder="請輸入"> <label style="background-color: red;" >{{msg}}</label> </div> <div> <input type="text" v-model="name" value="名字" placeholder="請輸入名字"> <label>{{name}}</label> </div> <div> <input type="radio" v-model="pickA" value="A"><label>A</label> <input type="radio" v-model="pickA" value="B"><label>B</label> <label>選中了:{{pickA}}</label> </div> <div> <input type="checkbox" v-model="check" false-value='no' true-value='yes'> <!-- 選中的時候check是yes,否則是no --> <input type="checkbox" v-model="check"> <!-- 選中的時候check是true,否則是false --> <label>{{check}}</label> </div> <div> <input type="checkbox" v-model="checks" value="A"><label>A</label> <input type="checkbox" v-model="checks" value="B"><label>B</label> <label>選中了:{{checks}}</label> </div> </div> <div> <textarea v-model="age" placeholder="請輸入年紀"></textarea> <label>{{age}}</label> </div> <div> <select v-model="selectA"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <label>選中了:{{selectA}}</label> <div> <select v-model="selectB" multiple> <!-- multiple:展開選擇器,展開才可以多選 --> <option disabled value="">請選擇</option> <option v-for="item in option" :key="item">{{item}}</option> </select> <label>選中了:{{selectB}}</label> </div> </div> </div>
export default {
name: 'HelloWorld',
data () {
return {
name: '',
age: '',
picked: '',
pickA:'',
selectA: '',
selectB: '',
option:['A','B','C'],
check: '',
checks: [],
msg:''
}
}
}
div{
margin-bottom: 10px;
}
下面是演示部分: