您的位置：首页 > Web前端 > Vue.js

掌握vue指令之(11)v-model指令

2020-06-06 06:52 232 查看

(11)v-model指令（双向绑定）

单向绑定：只能将new Vue()中模型对象中变量值的修改更新到页面上显示。如果页面中元素内容发生变化，无法自动将更改更新回new Vue()中的模型对象中保存。

解决：今后只要希望自动获得用户在界面上输入或选择的新值，都只能用双向绑定。

双向绑定:既能将new Vue()中模型对象中变量值的修改更新到页面上显示。又能将页面中元素内容发生的变化，自动更新回new Vue()中的模型对象中保存。

写法：<表单元素 v-model:可能变化的属性 =“变量”>

强调 :双向绑定几乎只用在表单元素上

原理: v-model包含两部分原理

(1). 从Model->View的绑定与之前讲解的绑定元素一样: 访问器属性+虚拟DOM树
(2). 但是从View->Model的绑定是新的原理：new Vue()扫描到包含v-model的表单元素时，就自动为表单元素绑定οnchange=function(){}事件处理函数。意为当表单元素的值发生改变时，就自动触发。然后，在onchange事件处理函数内，包含自动获取当前元素值并更新回Vue中指定变量中保存的语句。

示例: 根据文本框中输入的关键词搜索相关内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--想点百度一下，可按关键词搜索-->
<!--1. 先做界面:
问题: 哪里可能发生变化
本例中: 当用户在文本框中输入新内容时，input的value可能发生变化，希望new Vue()中自动获得用户输入的新值，所以用该用v-model:绑定。
问题: 哪个元素会触发事件
本例中: 点击button执行查找操作
用户在文本框上按回车，也能执行和按钮的click一样的查找操作！-->
<div id="app">
<input type="text" @keyup="search2" v-model:value="keywords"><button @click="search">百度一下</button>
</div>
<script>
//2. 定义new Vue()对象
new Vue({
el:"#app",
//3. 定义模型对象
//问题: 页面中共需要几个变量
//本例中: 页面中只需要一个变量keywords，且如果用户未输入时，keywords的默认值为""
//问题: 页面中共需要几个事件处理函数
//本例中: 按钮需要search函数
//       文本框需要search2函数
data:{
keywords:""
},
methods:{
search(){
//如果用户输入的关键词去空格后不为空
//if(this.keywords.trim()!==""){
//才用关键词执行查找操作
console.log(`查找 ${this.keywords} 相关的内容....`)
//}
},
search2(e){
//只有点在回车上，才执行search操作
if(e.keyCode==13){
this.search();
}
}
}
})
</script>
</body>
</html>

运行效果

其他类型的表单元素如何双向绑定

问题: 不是所有表单元素修改时，更新的都是value属性。比如radio和checkbox元素更新时，更新的就不是value属性。而是value属性写死固定不变，而更新checked选中状态属性
解决: 修改表单元素时，哪个属性变化，就用v-model绑定哪个属性。比如: 如果value属性值可能发生变化，就用v-model:value=“变量”。再比如: 如果checked属性可能发生变化，就用v-model:checked=“变量”。
写法:

<input type="radio" value="写死的值" v-model:checked="变量">

示例: 切换选择性别

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--请用户选择性别-->
<!--1. 先做界面
问题: 界面中哪里可能发生变化
本例中: 随着用户切换选择性别，两个input的checked属性可能发生变化又因为是表单元素
所以: 两个input都用v-model:checked="变量"
问题: 哪个元素可能触发事件
本例中: 点按钮输出用户选择的性别值-->
<div id="app">
<label><input type="radio" name="sex" value="1" v-model:checked="sex">男</label>
<label><input type="radio" name="sex" value="0" v-model:checked="sex">女</label>
<br/>
<button @click="submit">提交</button>
</div>
<script>
//2. 创建new Vue()对象
new Vue({
el:"#app",
//3. 定义模型对象
//问题: 界面上一共需要几个变量
//本例中: 界面上只需要一个变量sex
//问题: 界面上共需要几个事件处理函数
//本例中: 只需要一个事件处理函数submit
data:{
sex:0 //假设初始时选择0
},
methods:{
submit(){
console.log(`您本次选择的性别值为${this.sex}`)
}
}
})
</script>
</body>
</html>

运行效果

下拉选择框: …

当用户在select内选择不同的option时，其实改的是整个select的value属性。
写法：

<select v-model:value="变量">

示例: 选择城市，查看城市图片(图片自行更换)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--用户选择城市，切换不同的城市图片-->
<!--1. 做界面
问题: 整个界面中共有几处可能发生变化？
本例中: select元素的value属性值和img的src属性值，两处可能发生变化
又因为: select元素是由用户手动选择的，而img的src是根据select的选择被动接受的。所以select元素采用双向绑定，img的src采用单项绑定。
规律: select元素选中的value值，就是img的src值，所以，select的value和img的src可共用一个变量-->
<div id="app">
<select v-model:value="src">
<option value="img/bj.jpg">北京</option>
<option value="img/sh.jpg">上海</option>
<option value="img/hz.jpg">杭州</option>
</select><br/>
<img :src="src">
</div>
<script>
//2. 创建new Vue()对象
new Vue({
el:"#app",
//3. 创建模型对象:
//问题: 界面上共需要几个变量
//本例中只需要一个变量就可同时控制select和img。
data:{
src:"img/sh.jpg",//开局默认选中上海
}
})
</script>
</body>
</html>

运行效果:

东哥笔记

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航