v-model拓展应用

v-model拓展应用#

常见的表单元素都可以用 v-model 绑定关联--快速 获取或设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

案例-小黑学习网#

小黑学习网

姓名：

是否单身：

性别: 男 女

所在城市: {{ item.name }}

自我描述：

立即注册

<div id="studyapp">
    <p>小黑学习网</p>
    <label for="uname">姓名：</label>
    <input v-model="uname" type="text" id="uname" />
    <label for="issingle">是否单身：</label>
    <input type="checkbox" id="issingle" v-model="issingle" />
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别:
    <input v-model="gender" type="radio" name="gender" id="male" value="1" />
    <label for="male">男</label>
    <input v-model="gender" type="radio" name="gender" id="female" value="0" />
    <label for="female">女</label>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
    <select v-model="cityId">
        <option v-for="(item, index) in cities" :key="item.id" v-bind:value="item.id">{{ item.name }}</option>
    </select>
    自我描述：
    <textarea v-model="desc"></textarea>
    <button>立即注册</button>
</div>

// 小黑学习网
const studyapp = new Vue({
    el: '#studyapp',
    data: {
        uname: '',
        issingle: false,
        gender: '1',
        cityId: '102',
        desc: '',
        cities: [
            { id: '101', name: '北京' },
            { id: '102', name: '上海' },
            { id: '103', name: '成都' },
            { id: '104', name: '南京' },
        ],
    },
});