Xuanmo Blog

基础

使用v-model对输入框实现数据双向绑定，语法v-model="dataName"，dataName为需要绑定的数据

 

修饰符

.lazy 表示输入框失去焦点的时候更新数据

.number 将输入的数据转换成number类型

.trim 去除输入框的多余空格

用法：

<input type="text" v-model.trim="message">

 

实例

   一个简单的数据双向绑定实例：

<div id="app">
    <input type="text" v-model="message">
    <p>这是input的内容：{{ message }}</p>
</div>

new Vue({
    el: '#app',
    data: {
        message: ''
    }
});

 

   单个复选框的值为true和false，将多个复选框的值添加到一个数组

<label for="xuan">xuan</label>
<input type="checkbox" id="xuan" value="xuan" v-model="checkbox">
<label for="mo">mo</label>
<input type="checkbox" id="mo" value="mo" v-model="checkbox">
<p>这是checkbox：{{ checkbox }}</p>

new Vue({
    el: '#app',
    data: {
        checkbox: []
    }
});

 

   select单选列表：

<select name="" id="" v-model="select">
    <option value="" disabled>请选择</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<p>这是select：{{ select }}</p>

new Vue({
    el: '#app',
    data: {
        select: ''
    }
});

使用v-for动态渲染，为第一条数据加上选中状态

<select name="" id="" v-model="selectd">
    <option
        v-for="item in aSelect"
        v-if="item.value == 'init'"
        value=""
        disabled>
        {{ item.text }}
    </option>
    <option
        v-else
        :value="item.value">
        {{ item.text }}
    </option>
</select>
<p>这是select动态渲染的：{{ selectd }}</p>

new Vue({
    el: '#app',
    data: {
        aSelect: [
            {text: '请选择', value: 'init'},
            {text: 'Xuanmo', value: 'Xuanmo'},
            {text: 'Jon', value: 'Jon'}
        ]
    }
});

 

   多行文本框

<textarea v-model="textarea"></textarea>
<p>这是textarea的内容：{{ textarea }}</p>

new Vue({
    el: '#app',
    data: {
        textarea: ''
    }
});