Vue：表单与v-model

最新推荐文章于 2024-02-19 16:47:55 发布

dangfulin

最新推荐文章于 2024-02-19 16:47:55 发布

阅读量210

点赞数 1

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/dangfulin/article/details/109503542

版权

web前端专栏收录该内容

14 篇文章 4 订阅

订阅专栏

Vue提供了 v-model 指令，用于在表单类元素上双向绑定数据。

一，基本用法

v-mode负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将Vue实例的数据作为数据来源，也就是说，使用v-mode后，控件的值只依赖于绑定的数据。

v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：

text 和 textarea：value property 和 input 事件。
checkbox 和 radio：checked property 和 change 事件。
select：value property 和 change 事件。

1，文本

        <div id="example">
            <label>
                <input v-model="message" placeholder="edit me">
            </label>
            <p>Message is: {{ message }}</p>
        </div>

		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
		<script>
            var example1 = new Vue({
                el: '#example',
                data: {
                	message: ''
				}
            })
        </script>

在这里插入图片描述

2，多行文本

<div id="example">
	<label>
		<textarea v-model="message" placeholder="add multiple lines"></textarea>
	</label>
	<br>
	<span>Multiline message is:</span>
	<p style="white-space: pre-line;">{{ message }}</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var example1 = new Vue({
        el: '#example',
        data: {
        	message: ''
		}
    })
</script>

在这里插入图片描述
需要注意的是，在使用v-model绑定数据后，就收数字或英文单词输入时会实时的显示出来，但在就收中文输入时只会在选定内容后才选定，如果需要实时显示，需使用@input代替v-model：

<div id="example">
	<label>
		<input type="text" @input="handleInput" placeholder="edit me here">
	</label>
	<br>
	<span>message is:</span>
	<p style="white-space: pre-line;">{{ message }}</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var example1 = new Vue({
        el: '#example',
        data: {
        	message: ''
		},
		methods: {
			handleInput: function (e){
				this.message = e.target.value;
			}
		}
    })
</script>

在这里插入图片描述

3，单选按钮

互斥单选按钮：
在这里插入图片描述

<div id="example">
	<input type="radio" id="one" value="One" v-model="picked">
	<label for="one">One</label>
	<br>
	<input type="radio" id="two" value="Two" v-model="picked">
	<label for="two">Two</label>
	<br>
	<span>Picked: {{ picked }}</span>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var vm = new Vue({
		el: '#example',
		data: {
			picked: ''
		}
	})
</script>

4，复选框

第一种简单复选按钮：
在这里插入图片描述

<div id="example">
	<label>
		<input type="checkbox" @click="pick">
	</label>
	<label>同意服务协议</label>
	<br>
	<p v-if="picked === true">已同意！</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var example1 = new Vue({
        el: '#example',
        data: {
			picked: false
		},
		methods: {
        	pick: function () {
        		this.picked = this.picked !== true;
			}
		}
    })
</script>

这里通过绑定点击事件实现状态切换。

另一种实现：
在这里插入图片描述

<div id="example">
	<input type="checkbox" id="checkbox" v-model="checked">
	<label for="checkbox">测试{{ checked }}</label>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
    var vm = new Vue({
	  el: '#example',
	  data: {
		checked: false
	  }
	})
</script>

在勾选时，数据checked的值变为true。

多个复选框：
在这里插入图片描述
存在多个选择框时，会将数据放入同一个数组中：

<div id="example-3">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: ['Jack']
  }
})
</script>

Jack是默认选项，因为这种绑定是双向的。

5，下拉列表

单选下拉列表：
在这里插入图片描述

<div id="example">
    <label>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option value="b">B</option>
            <option>C</option>
        </select>
    </label>
	<br>
    <span>Selected: {{ selected }}</span>
</div>

<script src="vue.js" type="text/javascript" charset="UTF-8"></script>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            selected: 'C'
        }
    })
</script>

<option>是备选项目，如果含有value属性，v-model会优先匹配value的值。如果没有，就会直接匹配<option>的text。
这里默认选中C。如果v-model表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。

复选下拉列表：
在这里插入图片描述

<div id="example">
    <select v-model="selected" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
		<option>D</option>
		<option>E</option>
		<option>F</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
</div>

<script src="vue.js" type="text/javascript" charset="UTF-8"></script>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            selected: []
        }
    })
</script>

给<selected>添加属性 multiple 就可以多选。
与复选框一样，数据绑定到同一个数组。

6，动态渲染

在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。

<div id="example">
	<select v-model="selected">
		<option v-for="option in options" v-bind:value="option.value">
			{{ option.text }}
		</option>
	</select>
	<span>Selected: {{ selected }}</span>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	new Vue({
		el: '#example',
		data: {
			selected: 'A',
			options: [{
					text: 'One',
					value: 'A'
				},
				{
					text: 'Two',
					value: 'B'
				},
				{
					text: 'Three',
					value: 'C'
				}
			]
		}
	})
</script>

二，值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但在业务中，有时需要绑定一个动态的数据，这时可以用 v-bind 来实现。
1，单选框：

<div id="example">
    <label>
        <input type="radio" v-model="pick" v-bind:value="value">
    </label>
	<p v-if="pick === false">pick: {{pick}}</p>
	<p>value: {{value}}</p>
	<p v-if="pick === value">app.pick ==app.value</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	var app = new Vue({
		el: '#example',
		data: {
			pick: false,
            value: true
		}
	})
	console.log(app.pick)
</script>

在这里插入图片描述

当选中时，app.pick === app.a

2，复选框：

<div id="example">
    <p>status1:{{status1}}</p>
    <p>status2:{{status2}}</p>
    <label>
        <input
                type="checkbox"
                v-model="toggle"
                true-value="status1"
                false-value="status2"
        >
        click to change status!
    </label>
    <p>current status:{{toggle}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	var app = new Vue({
		el: '#example',
		data: {
			toggle: false,
            status1: 'on',
            status2: 'off'
        }
	})
</script>

在这里插入图片描述

当选中时app.toggle == ‘on’，当没有选中时vm.toggle == ‘off’

3，下拉列表：
前面的“动态渲染”就是一个例子。

当选中时typeof app.selected是object对象

三，修饰符

与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。

1，.lazy

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

2，.number

<!-- 将就收到的string类型的数字转为number类型 -->
<input v-model.number="age" type="number">

3，.trim

<div id="example">
    <label>
    	<!-- 自动过滤用户输入的首尾空白字符 -->
        <input v-model.trim="msg">
    </label>
	<p>message:{{msg}}</p>
    <p>message length:{{msg.length}}</p>
</div>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	var app = new Vue({
		el: '#example',
		data: {
            msg: '',
        }
	})
</script>

在这里插入图片描述

到此为止，最最基础的Vue知识算是介绍完了。

dangfulin

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue：表单与v-model

Vue提供了 v-model 指令，用于在表单类元素上双向绑定数据。一，基本用法v-mode负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将Vue实例的数据作为数据来源。v-model在内部为不同的输入元素使用不同的property并抛出不同的事件：text 和 textarea：value property 和 input 事件。checkbox 和 ra
复制链接

扫一扫

专栏目录