5-1雙向數(shù)據(jù)綁定 v-model
<div id="root">
<p>
<label for="">請(qǐng)輸入姓名</label>
<input type="text" v-model="name" placeholder="請(qǐng)輸入名字">
</p>
<p>
你的名字是:{{name}}
</p>
</div>
<script>
var app = new Vue({
el: '#root',
data() {
return {
name: ''
}
},
})
</script>
5-2復(fù)選框(checkbox)相關(guān)的操作
1）梭域、單個(gè)復(fù)選框的取反操作
2）击喂、多個(gè)復(fù)選框的數(shù)組操作
<div id="root">
<p>單個(gè)復(fù)選框:</p>
<p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</p>
<p>多個(gè)復(fù)選框:</p>
<p>
<input type="checkbox" id="chinese" value="chinese" v-model="checkedNames">
<label for="chinese">chinese</label>
<input type="checkbox" id="Math" value="Math" v-model="checkedNames">
<label for="Math">Math</label>
<input type="checkbox" id="English" value="English" v-model="checkedNames">
<label for="English">English</label>
</p>
<p>選擇的值為:{{checkedNames}}</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
checked: false,
checkedNames: []
}
})
</script>
效果
5-3單選框(radio)相關(guān)的操作
<div id="root">
<p>單個(gè)復(fù)選框:</p>
<p>
<input type="radio" id="man" value="man" v-model="picked">
<label for="man">man</label>
<input type="radio" id="female" value="female" v-model="picked">
<label for="female">female</label>
</p>
<p>
選中的值：{{picked}}
</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
picked: 'man',
}
})
</script>
效果
5-4選擇框(select)相關(guān)的操作
<div id="root">
<p>選擇框:</p>
<select name="age" id="age" v-model="ages">
<option value="0-12">兒童</option>
<option value="12-18">少年</option>
<option value="18-30">青年</option>
<option value="30-40">中年</option>
<option value="40-50">壯年</option>
<option value="50-">老年</option>
</select>
<p>你先則的值是:{{ages}}</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
ages: '0-12',
}
})
</script>
效果
5-5 表單中一些修飾符的操作（.lazy、.number碰辅、.trim）
<div id="root">
<p>.lazy(input事件同步輸入看的值懂昂，通過lazy轉(zhuǎn)為change事件中同步):</p>
<input type="text" v-model.lazy="text">
<p>你輸入的文本內(nèi)容是:{{text}}</p>
<p>.number(輸入文本內(nèi)容為數(shù)字):</p>
<input type="number" v-model.number="number">
<p>輸入的數(shù)字是:{{number}}</p>
<p>.trim(去除輸入框兩端的空格):</p>
<input type="text" v-model.trim="trimText">
<p>顯示輸入的內(nèi)容:{{trimText}}</p>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
text: '',
number: '',
trimText: ''
}
})
</script>
效果
更多
上一篇：第4章 深入理解Vue組件
下一篇：第6章 Vue 動(dòng)畫
全篇文章：Vue學(xué)習(xí)總結(jié)
所有章節(jié)目錄：Vue學(xué)習(xí)目錄
