在vue
中的表单需要使用指令v-model
实现数据的双向绑定。
使用v-model实现数据的双向绑定
输入框
<body>
<div id="root">
<!-- 通过v-model指令实现了输入框的值和data里的值双向绑定 -->
<input type="text" v-model="inputValue"><br/>
<span>你输入的内容是:{{inputValue}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data() {
return {
inputValue: ''
}
}
})
</script>
</body>
选择框
<body>
<div id="root">
<div>
<input type="checkbox" v-model="hobi" value="吃饭">吃饭
<input type="checkbox" v-model="hobi" value="睡觉">睡觉
<input type="checkbox" v-model="hobi" value="敲代码">敲代码
<p>你的爱好是:{{hobi}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data() {
return {
hobi: []
}
},
methods: {
}
})
</script>
</body>
v-model的实现原理
text 和 textarea 元素使用 value
属性和 input
事件实现v-model的效果
<body>
<div id="root">
<input
type="text"
:value="inputValue"
@input="handleInputChange"
><br/>
<span>你输入的内容是:{{inputValue}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data() {
return {
inputValue: ''
}
},
methods: {
// 这里的e就是input事件,在事件里我们可以拿到你正在输入的值
handleInputChange(e) {
// 拿到正在输入的值赋值给inputValue
// 只要绑定了inputValue的元素,在inputValue发生改变后都会重新渲染
this.inputValue = e.target.value
}
}
})
</script>
</body>
checkbox 和 radio 使用 checked
属性和 change
事件
<!--
实现思路:
1、首先会在data里面定义初始的数组,用于放选中的值
2、通过includes判断数组里是否包含选框的值来决定checked是true还是false
3、通过change事件获取选中值并判断数组里面是否有该值,有删除,没有就添加
-->
<body>
<div id="root">
<div>
<input
type="checkbox"
:checked=hobi.includes("吃饭")
@change="inhandleCheck"
value="吃饭"
>吃饭
<input
type="checkbox"
:checked=hobi.includes("睡觉")
@change="inhandleCheck"
value="睡觉"
>睡觉
<input
type="checkbox"
:checked=hobi.includes("敲代码")
@change="inhandleCheck"
value="敲代码"
>敲代码
<p>你的爱好是:{{hobi}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#root",
data() {
return {
hobi: []
}
},
methods: {
inhandleCheck(e) {
const v = e.target.value
if(this.hobi.includes(v)) {
// 有就删除
this.hobi = this.hobi.filter(item => item !== v)
} else {
// 没有就添加
this.hobi.push(v)
}
}
}
})
</script>
</body>