搜尋

首頁  >  問答  >  主體

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 天前564

全部回覆(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
  • 取消回覆