下拉框单选
v-model绑定的是一个值
当选中option中一个时, 会将它对应的value赋值到mySelect中
<select v-model="mySelect"> <option value="apple">苹果<option> <option value="orange">橘子<option> <option value="banana">香蕉<option> </select> <p>您最喜欢的水果: {{mySelect}}</p>
下拉框多选
v-model绑定的是一个数组
当选择多个值时,会将选中的option对应的value添加到数组mySelect中
<option value="apple">苹果<option>
<option value="orange">橘子<option>
<option value="banana">香蕉<option>
</select>
<p>您最喜欢的水果: {{mySelect}}</p>
值绑定
含义: 动态的给value赋值
1 在前面的value中的值, 都是在定义input的时候直接给定的
2 但真实开发中, input的值可能是从网络获取或定义在data中的
3 可以通过v-bind:value动态的给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
使用: 需要将多个数据结合起来进行显示的时候
<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
}
}
})
