Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CSDN 技术社区
skill_tree_vue
提交
af7c08f8
S
skill_tree_vue
项目概览
CSDN 技术社区
/
skill_tree_vue
通知
5
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
skill_tree_vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
af7c08f8
编写于
2月 09, 2023
作者:
Z
zhaoshuangshi
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
1-5下面小节习题更换
上级
dd5a23c6
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
4 addition
and
68 deletion
+4
-68
data/1.Vue初阶/5.v-model/1.v-model/exercises.md
data/1.Vue初阶/5.v-model/1.v-model/exercises.md
+4
-54
data/1.Vue初阶/5.v-model/2.v-model绑定修饰符/exercises.md
data/1.Vue初阶/5.v-model/2.v-model绑定修饰符/exercises.md
+0
-14
未找到文件。
data/1.Vue初阶/5.v-model/1.v-model/exercises.md
浏览文件 @
af7c08f8
# v-model
<div
style=
"color: pink;font-size:22px;font-weight:700"
>
小常识:
</div>
v-model 指令我们大家很熟悉了吧,该指令可以在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
**文本框**
下面代码中p标签的值会根据上方文本框输入的值的改变而改变。
```
html
<input
v-model=
"message"
placeholder=
"edit me"
>
<p>
Message is: {{ message }}
</p>
```
**复选框**
```
html
<input
type=
"checkbox"
id=
"checkbox"
v-model=
"checked"
>
<label
for=
"checkbox"
>
{{ checked }}
</label>
```
多个复选框
```
html
<input
type=
"checkbox"
id=
"jack"
value=
"Jack"
v-model=
"checkedNames"
>
<label
for=
"jack"
>
Jack
</label>
<input
type=
"checkbox"
id=
"john"
value=
"John"
v-model=
"checkedNames"
>
<label
for=
"john"
>
John
</label>
<input
type=
"checkbox"
id=
"mike"
value=
"Mike"
v-model=
"checkedNames"
>
<label
for=
"mike"
>
Mike
</label>
<br>
<span>
Checked names: {{ checkedNames }}
</span>
```
**选择框**
```
html
<div
id=
"example-5"
>
<select
v-model=
"selected"
>
<option
disabled
value=
""
>
请选择
</option>
<option>
A
</option>
<option>
B
</option>
<option>
C
</option>
</select>
<span>
Selected: {{ selected }}
</span>
</div>
```
上面只是为大家举了几个小案例,当然我们v-model绑定的值一定是我们在data中定义好的!
<br>
<div
style=
"color: #8E7CC3;font-size:22px;font-weight:700"
>
小测试:
</div>
下列关于 v-model 的说法,哪项是不正确的?
<br/><br/>
## 答案
v-model 是内置指令,不能用在自定义组件上
v-model 是内置指令,不能用在自定义组件上
。
## 选项
### A
v-model 能
实现双向绑定
v-model 能
够在表单控件或者组件上创建双向绑定。
### B
v-model 本质上是语法糖,
它负责监听用户的输入事件以更新数据
v-model 本质上是语法糖,
随表单控件类型不同而不同。
### C
对 input 使用 v-model,实际上是指定其 :value 和 @input
对 input 使用 v-model,实际上是指定其 :value 和 @input
。
data/1.Vue初阶/5.v-model/2.v-model绑定修饰符/exercises.md
浏览文件 @
af7c08f8
# v-model修饰符
<div
style=
"color: pink;font-size:22px;font-weight:700"
>
小常识:
</div>
上节我们看到了v-model的运用,那么他还有一些灵活的修饰符可以配合使用,下面就是v-model常用的修饰符
<br/>
![
在这里插入图片描述
](
https://img-blog.csdnimg.cn/46370cb4f4714ce69acf35b8c330f135.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16
)
<br/>
<br/>
![
在这里插入图片描述
](
https://img-blog.csdnimg.cn/0df780c7de4743c0a4285550e4f6d5f2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5Yeg5L2V5b-D5YeJ,size_20,color_FFFFFF,t_70,g_se,x_16
)
<br/>
<br>
<div
style=
"color: #8E7CC3;font-size:22px;font-weight:700"
>
小测试:
</div>
下列不属于v-model修饰符的是?
<br/><br/>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录