Vue.js v-model 双向绑定 和 计算属性

2021/4/9 Vue

# 表单控件绑定&双向数据绑定

# v-model

# 基本用法

# 多选

<div id='box'>
    <input type='checkbox' v-model='check'>
</div>
1
2
3
new Vue({
    el:'#box',
    data:{
        check:true
    }
})
1
2
3
4
5
6

通过v-model绑定了一个数组checkgroup,这样实现每个复选框被点击时,Vue会讲该复选框的value值按顺序push到checkgroup中

<div id='box'>
	<input type="checkbox" v-model="checkgroup" value="vue"/>vue
	<input type="checkbox" v-model="checkgroup" value="react"/>react
	<input type="checkbox" v-model="checkgroup" value="jquery"/>jquery
</div>
1
2
3
4
5
new Vue({
    el:'#box',
    data:{
        checkgroup:[];
    }
})
1
2
3
4
5
6

# 单选

<div id='box'>
    <input type="radio" v-model="picked" value="vue" name="aaa"/>vue
	<input type="radio" v-model="picked" value="react" 	name="aaa"/>react
	<input type="radio" v-model="picked" value="jquery" name="aaa"/>jquery
</div>
1
2
3
4
5
new Vue({
    el:'#box',
    data:{
        picked:""
    }
})
1
2
3
4
5
6

# v-model 值绑定

当定义在data中的值,通过v-mofel动态给value绑定值

<div id="app">
		<label v-for="item in orHobbies" :for="item">
			<input type="checkbox" :value="item"  :id="item"  v-model="Hobbies">{{item}}
		</label>
		<h2>{{Hobbies}}</h2>
	</div>
1
2
3
4
5
6
		<script src="vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data: {
						orHobbies:['足球','乒乓球','网球','奶球'],
						Hobbies:[],
				      }
			})
		</script>
1
2
3
4
5
6
7
8
9
10

# 修饰符

# .lazy

取代 input 监听 change 事件

<div id='box'>
    <input v-model.lazy='mytext'>
    <!-- 这里的mytext不会实时修改而是在input失去焦点的时候才会修改-->
    {{mytext}} 
</div>
1
2
3
4
5
new Vue({
    el:'#box',
    data:{
        mytext:''
    }
})
1
2
3
4
5
6

# .number

输入字符串转为有效的数字

<input type="number" v-model.number="mynumber"/>
{{mynumber}}
1
2

# .trim

输入首尾空格过滤

<input type="text" v-model.trim="myusername"/>
|{{myusername}}|  
1
2

# 计算属性

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如