javascript - vue.js 中 model数据绑定的问题
本文介绍了javascript - vue.js 中 model数据绑定的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如下代码里
为什么js 里面的 el 元素必须绑定div 的id cc才能实现即时输入的效果 反而如果直接绑定到 input的id 无法实现？毕竟model的message 是作用在input上的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id = "cc">
<input v-model="message" placeholder="edit me" id="text">
<p>Message is: {{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#text",
data:{
message:''
}
})
</script>
</body>
</html>解决方案
每个vue实例在DOM中都有一个作用范围，而el属性的值就决定了该vue实例作用域在DOM中的范围，当你设置了el属性的值时，就设定了在DOM中哪些界面元素可以访问vue实例里面的属性；如果你用过angular，那么el这个值的作用其实就和angular里面的contorller类似；
这篇关于javascript - vue.js 中 model数据绑定的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
