Vue入门到放弃23(vue案例--评论列表)

最新推荐文章于 2024-05-25 11:37:13 发布

开猿节流

最新推荐文章于 2024-05-25 11:37:13 发布

阅读量420

点赞数

分类专栏： vue

本文为博主原创文章，未经博主允许不得转载。交流联系QQ：634487911

本文链接：https://blog.csdn.net/qq_38191191/article/details/103493794

版权

基础页面

<body>
    <div id="app">
        <ul class="list-group">
            <!--循环取出列表数据-->
            <li class="list-group-item" v-for="(item ,i) in list" :key="item.id">
                <span class="badge">评论人：{
  {item.user}}</span>{
  {item.content}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                list: [
                    { id: Date.now(), user: '李白', content: '天生我材必有用' },
                    { id: Date.now(), user: '小白', content: '劝君更尽一杯酒' },
                    { id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
                    ]
            },
            methods: {}  
        })
    </script>
</body>

效果：

添加评论组件

现在我们通过Vue的组件来添加评论的头部，

最低0.47元/天解锁文章

开猿节流

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到放弃23(vue案例--评论列表)

基础页面<body> <div id="app"> <ul class="list-group">  <li class="list-group-item" v-for="(item ,i) in list" :key="item.id"...
复制链接

扫一扫