下拉框单选

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

        }

    }

})