老师,有个不能理解的地方
来源：2-17 表单中双向绑定指令的使用（3）
__Promise
2021-08-25 14:28:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<input type="text" :value="msg">
<div>
msg---{{msg}}
</div>
</div>
<script>
const vue = Vue.createApp({
data() {
return {
msg: '123'
}
}
})
const vm = vue.mount('#root')
</script>
</body>
</html>
问题描述：
这里使用v-bind单向绑定时,
我的理解是,
因为不管input里输入什么内容,
都不会改变msg的值,
input的value又指向msg,
所以input的内容应该永远都是'123',
实际上却不是
相关截图：
写回答
1回答
-
同学你好，解答如下：
1、:value起到的作用只是让input的初始内容，受数据中的msg控制：
2、:value并不会拒绝、阻止我们往输入框中输入内容，输入框的内容会随着人为输入而改变：
只是，我们新输入的内容，并不会映射到数据msg上：
这个现象是固定的，注意下就行了。
祝学习愉快！
0h021-08-25
相似问题