注：實例環境 vue cli構建的項目
app.vue
<template> <Example></Example> </template> <script> import Example from './components/Example' export default { name: 'App', components: { Example } } </script> <style> </style> Example.vue
<template> <div> <p>{{string}}</p> <p>{{bool}}</p> <p> <span v-for="value in array" :key="value">{{value}}</span> </p> <p> {{obj.name}}:{{obj.age}} </p> <ul> <li v-for="item in arrObj" :key="item.id">{{item.id}}:{{item.title}}</li> </ul> </div> </template> <script> export default { name: "Example", data:function () { return { string:'string', bool:true, array:[1,2,3], obj:{name:'天行子',age:23}, arrObj:[ {id:1,title:'title1'}, {id:2,title:'title2'}, {id:3,title:'title3'} ] } }, } </script> <style scoped> </style> 刷新瀏覽器，看見如下數據
string true 123 天行子:23 1:title1 2:title2 3:title3