vuejs

來源:互聯網
上載者:User

標籤:vuejs   部分   版本   注意   title   script   例子   限制   綁定   

vuejs資料雙向繫結

下面我們來實現資料雙向繫結的例子,我們使用vuejsv-model屬性

注意

  • v-model 指令在表單控制項元素上建立雙向資料繫結。它會根據控制項類型自動選取正確的方法來更新元素。
  • vuejs雙向繫結並不能適用於所有的html表單,限制為inputselecttextareacomponents

建立vue-2.html並編輯為

 

<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8" />        <title>Vuejs簡單樣本</title>        <!--引入開發版本vue.js,在開發版本中會有很多友好的提示-->        <script src=‘./vue.js‘></script>    </head>    <body>        <!--定義一個id為demo的div-->        <div id="demo">          <!--此處的msg為在vuejs中定義的變數,放在兩個花括弧中-->        <h1>Hello {{msg}}</h1>        <!--此處我們建立一個文字框並定義它的v-model的屬性的內容為我們在vue中定義的msg-->        <input type="text" v-model="msg">        </div>        <script>            <!--執行個體化vuejs-->            new Vue({            <!--el指定的id為css選取器-->                el:‘#demo‘,            <!--我們的變數統統放到data中-->                data:{            <!--此處聲明的變數msg內容為實驗樓-->                    msg:‘實驗樓‘                }            })    </script>    </body></html>

el表示在html中哪個部分起作用,文法類似jquery的節點選取器,在這裡我們看到它選擇了一個ID

 

vuejs

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: