Vue(二)——語法

{{data}}用於數據綁定

v-html用於輸出html代碼

v-bind:data中use屬性爲true採用class1的樣式,否則不使用這個類。縮寫:

<div v-bind:class="{'class1': use}">
    v-bind:class 指令
</div>

綁定參數和屬性

<div id="app">
    <pre><a v-bind:href="url">菜鳥教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})

表達式也寫在雙大括號內.

v-if指令根據屬性的值,爲true插入元素,false不作使用。

v-on用於監聽DOM事件,監聽的事件名稱作爲參數。縮寫@

<a v-on:click="doSomething">

輸入框:其中v-model可實現數據的雙向綁定,根據提交的值自動更新綁定元素的值,

<input v-model = "屬性">

v-show值爲true進行展示。

循環

v-for綁定數據到一個數組

<v-for "item in items">

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章