https://www.xuanmo.xin/1991.html

Vue学习笔记-表单输入

发布于 分类: Vue 0 376

基础

使用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: ''
    }
});

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

已经没有了!