vue渲染資料的三種方式

1.將值，繫結到input，textarea中

<div id="texts">
    <textarea  v-model="content"></textarea>
</div>

<script>
   $(document).ready(function(){
        var datable = new Vue({
            el:#texts,
            data() {
                return{
                    content:''
                }
            }
        })
    }) 
</script>
 

2.將值渲染到列表或<span>等標籤中

<div id="texts">
    <!--當vue中定義值為''時，直接使用{{}}即可取出資料-->
    <span>{{content}}</span>
    <!--當vue中定義值為陣列[]時，則需要使用for迴圈，迴圈取出陣列中的資料-->
    <template v-for="(object,index) in contentlist">
        <span>{{object.contentlistsubname}}</span>
    </template>
</div>

<script>
   $(document).ready(function(){
        var datable = new Vue({
            el:#texts,
            data() {
                return{
                    content:'',
                    contentlist:[],
                }
            }
        })
    }) 
</script>