v-model 创建双向绑定

很酷的站长

发布于 2023-02-18 10:53:46

3220

发布于 2023-02-18 10:53:46

文章被收录于专栏：站长的编程笔记

在表单 <input>、<textarea> 及<select>元素控件或者组件上创建双向绑定，它负责监听用户的输入事件以更新数据

1. 普通文本框

<div id="app">
<p>{{ msg }}</p>
<input type="text" v-model="msg">
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
msg: 123,
},
})
</script>

2. 单选框

<div id="app">
<p>{{ sex }}</p>
男 <input type="radio" value="男" v-model="sex">
女 <input type="radio" value="女" v-model="sex">
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
sex: 1,
},
})
</script>

3. 复选框

<div id="app">
<p>{{ language }}</p>
PHP <input type="checkbox" value="PHP" v-model="language">
Java <input type="checkbox" value="Java" v-model="language">
Python <input type="checkbox" value="Python" v-model="language">
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
language: ['PHP']
},
})
</script>

4. 多行文本框

<div id="app">
<p>{{ content }}</p>

<textarea v-model="content"></textarea>
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
content: 123
},
})
</script>

5. 下拉选择框

<div id="app">
<p>{{ city }}</p>

<select v-model="city">
<option disabled value="">请选择</option>
<option value="1">郑州</option>
<option value="2">开封</option>
<option value="3">南阳</option>
</select>
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
city: 2
},
})
</script>

6. 修饰符 `trim` 清除两边的空格

<div id="app">
<p>{{ content.length }}</p>

<input type="text" v-model.trim="content">
</div>

<script>
let vm = new Vue({
el: '#app',
data: {
content: ''
},
})
</script>收藏 | 0点赞 | 0打赏

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

input