下拉框單選
v-model綁定的是一個值
當(dāng)選中option中一個時, 會將它對應(yīng)的value賦值到mySelect中
<select v-model="mySelect"> <option value="apple">蘋果<option> <option value="orange">橘子<option> <option value="banana">香蕉<option> </select> <p>您最喜歡的水果: {{mySelect}}</p>
下拉框多選
v-model綁定的是一個數(shù)組
當(dāng)選擇多個值時,會將選中的option對應(yīng)的value添加到數(shù)組mySelect中
? ? <option value="apple">蘋果<option>
? ? <option value="orange">橘子<option>
? ? <option value="banana">香蕉<option>
</select>
<p>您最喜歡的水果: {{mySelect}}</p>
值綁定
含義: 動態(tài)的給value賦值
1 在前面的value中的值, 都是在定義input的時候直接給定的
2 但真實開發(fā)中, input的值可能是從網(wǎng)絡(luò)獲取或定義在data中的
3 可以通過v-bind:value動態(tài)的給value綁定值
<div id="app">
? ? <label v-for="item in nums" :for="item">
? ? ? ? <inout type="checkbox" value="item" :id="item" v-model="hobbies">{{item}}
? ? </label>
? ? <h2>您的愛好是: {{hobbies}}</h2>
</div>
cosnt app = new Vue({
? ? el: '#app',
? ? data: {
? ? ? ? hobbies: [],
? ? ? ? nums: ['籃球', '足球', '羽毛球']
? ? }
})
計算屬性 computed
使用: 需要將多個數(shù)據(jù)結(jié)合起來進行顯示的時候
<div id='app'>
// 使用拼接的方法 -- 語法太過繁瑣
<h2>{{firstName + '' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
// 使用方法
<h2>{{getFullName()}}</h2>
// 使用計算屬性 -- 看起來最舒服 最好
<h2>{{fullName}}</h2>
</div>
const app = new Vue({
? ? el: '#app',
? ? data:{
? ? ? ? firstName: 'li',
? ? ? ? lastName: 'er'
? ? },
? ? // 計算屬性
? ? computed: {
? ? ? ? fullName: function () {
? ? ? ? ? ? reture this.firstName + '' + this.lastName
? ? ? ? }
? ? },
? ? // 方法
? ? methods: {
? ? ? ? getFullName () {
? ? ? ? ? ? reture this.firstName + '' + this.lastName
? ? ? ? }
? ? }
})
