Vue中的列表展示可以非常方便地展現JSON數據。下面通過一個實例來詳細介紹Vue的列表展示。
首先,我們需要創建一個Vue實例,引入Vue的庫,然后定義一個data對象來存放我們的JSON數據。這里我們定義了一個包含三個對象的數組,每個對象包含兩個屬性name和age。
var demo = new Vue({ el: '#demo', data: { items: [ { name: 'Bob', age: 28 }, { name: 'Mary', age: 22 }, { name: 'John', age: 30 } ] } })
接下來,我們在HTML中使用v-for指令來循環渲染每一個列表項。這里我們使用了兩個參數,item和index。item表示當前列表項的值,index表示當前列表項的索引。
- {{ index + 1 }}. {{ item.name }} - {{ item.age }}
我們使用Double Mustaches({{}})語法在界面上呈現出我們的數據。這里我們將每個列表項的名字和年齡渲染出來,并用其對應的索引作為編號顯示在前面。
除了v-for指令外,Vue還提供了v-bind指令可以用來綁定屬性。我們可以使用v-bind來將數據綁定到元素的屬性上。例如,我們可以將列表項的age屬性綁定到li元素的title屬性上,這樣當鼠標懸停在列表項上時會顯示當前項的年齡。
- {{ index + 1 }}. {{ item.name }} - {{ item.age }}
此時我們就完成了Vue列表展示JSON數據的操作,通過上述示例不難看出Vue的列表展示能夠極大簡化我們的操作,使代碼更易讀易懂。這一特性深受開發者青睞,成為Vue框架中的一大亮點。
上一篇vue 移除顯示節點
下一篇vue 移動端評分