搜索

首页  >  问答  >  正文

javascript - vue.js 中 model数据绑定的问题

如下代码里

为什么js 里面的 el 元素必须绑定p 的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>

<p id = "cc">
<input v-model="message" placeholder="edit me" id="text">
<p>Message is: {{message}}</p>
</p>

<script type="text/javascript">

  var vm = new Vue({
         
        el:"#text",
        data:{

            message:''
        }

  })






</script>
</body>
</html>
大家讲道理大家讲道理2744 天前565

全部回复(3)我来回复

  • PHPz

    PHPz2017-05-19 10:24:05

    你只绑定input，作用域只在input，那你的p标签就没有效果呀。所以你要在p里面。

    回复
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:24:05

    id是个容器，容器包含了你的vue实例化涉及到的所有数据绑定和其它行为。你完全可以在一个页面中定义多个容器，但是，每个容器就好似一个函数作用域，作用域内的变量或者函数的访问行为由当前作用域环境决定。
    你的示例可不仅仅是input啊，你绑定的数据还有p元素啊。所以，你得把容器id放在他们的父元素p上。

    回复
    0
  • 淡淡烟草味

    淡淡烟草味2017-05-19 10:24:05

    每个vue实例在DOM中都有一个作用范围，而el属性的值就决定了该vue实例作用域在DOM中的范围，当你设置了el属性的值时，就设定了在DOM中哪些界面元素可以访问vue实例里面的属性；如果你用过angular，那么el这个值的作用其实就和angular里面的contorller类似；

    回复
    0
  • 取消回复