vue 值绑定，渲染数据

最新推荐文章于 2024-04-12 15:32:24 发布

做一只会飞的象

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue 渲染列表值绑定 input span

本文链接：https://blog.youkuaiyun.com/weixin_42869591/article/details/83214883

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍Vue.js中三种数据渲染方式：使用v-model双向绑定输入框数据；直接在<span>等标签中显示简单数据；利用v-for循环遍历数组并渲染列表。通过实例展示了如何在不同场景下有效应用这些技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>