Vue表单和v-model

表单基本用法

input/textarea/checkbox/radio/select/from

input 文本

<template>
<div id="app">
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
<p><button @click="message='Origami'">set message to Origami</button></p>
</div>
</template>

<script>


export default {
name: 'App',
data(){
return{
message:'hi'
}
},
}
</script>

效果如下：

1.gif

可以看到改message，UI会自动变化。用户改input，message会自动变化。
双向绑定：改内存页面会自动变化，改页面内存也会自动变化，这就叫双向绑定。

textarea 多行文本

把input改成textarea即可

复选框 checkbox

单个复选框，绑定到布尔值
多个复选框，绑定到同一个数组：
<template>
<div id="app">
爱好：{{ x }}
<label>
<span>抽烟:</span>
<input type="checkbox" v-model="x" :value="1" />
</label>
<label>
<span>喝酒:</span>
<input type="checkbox" v-model="x" :value="2" />
</label>
<label>
<span>烫头:</span>
<input type="checkbox" v-model="x" :value="3" />
</label>
</div>
</template>

<script>


export default {
name: 'App',
data() {
return {
x: []//绑定到一个数组
}
},
}
</script>

需要声明x，每个checkbox是需要对应有个变量的。
效果如下：

复选框.gif

单选按钮 radio

name=""当name值相同时就表示是一组的。

<template>
<div id="app">
三选一：{{ x }}
<label>
<span>抽烟:</span>
<input type="radio" name="want " v-model="x" :value="1" />
</label>
<label>
<span>喝酒:</span>
<input type="radio" name="want" v-model="x" :value="2" />
</label>
<label>
<span>烫头:</span>
<input type="radio" name="want" v-model="x" :value="3" />
</label>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
x: '',
}
},
}
</script>

单选按钮.gif

选择框 select

<div>
爱好（下拉列表）:{{ z }}
<select v-model="z">
<option value="">请选择</option>
<option v-for="item in array" :value="item.value" :key="item.value">{{ item.text }}</option>
</select>
</div>

<script>


export default {
name: 'App',
data() {
return {
z: '',
array: [
{ text: '抽烟', value: 1 },
{ text: '喝酒', value: 2 },
{ text: '烫头', value: 3 }
]
}
},
}
</script>

下拉选择框.gif

用from提交元素

<template>
<div id="app">
<form @submit.prevent="onSubmit">
<label>
<span>用户名</span>
<input type="text" v-model="user.username" />
</label>
<label>
<span>密码</span>
<input type="password" v-model="user.password" />
</label>
<button type="submit">登陆</button>
</form>
</div>
<template>


<script>
export default {
name: 'App',
data() {
return {
user: {
username: '',
password: ''
}
},
methods: {
onSubmit() {
console.log(this.user)
}
}
}
</script>

修饰符

.lazy/.number/.trim

.lazy延迟触发,比如，input时等用户输完了再触发
.number当你只想要数字时
注意:需要设置初始值为0，且只能截取首段数字.
.trim(常用)自动把前面和后面的空格去掉

<input type="text" v-model="user.username" />
//等价于
<input type="text" :value="user.username" @input="user.username=$event.target.value"/>
//绑定value等于一个东西，@input=让这个东西等于$event.target.value

v-model默认会监听input事件

Vue的双向绑定是如何实现的？
1.解释v-model的作用
v-model可以实现绑定一个变量:
在变量变化的时候UI也会变化,用户改变UI时数据也会变化，这就是双向绑定。
2.深入
v-model是v-bind:value 和 v-on:input的语法糖
v-on:input="???" v-model对应的input到底是什么呢？(2种情况)
1' 如果是原生的input，input就是xxx=$event.target.value
2' 如果是自定义的组件，input就是xxx=$event