注：例項環境 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