vue 值绑定，渲染数据

版权声明：如需转载，请带上本博客链接 https://blog.csdn.net/weixin_42869591/article/details/83214883

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>