vue 评论小案例

最新推荐文章于 2024-05-22 15:44:50 发布

天马行空zqzq

最新推荐文章于 2024-05-22 15:44:50 发布

阅读量346

点赞数

本文链接：https://blog.csdn.net/qq_42039912/article/details/107418390

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="lib/vue.js"></script>
    <style>
        li {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <text1 v-on:func="getData"></text1>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" v-bind:key="item.name">
                <span class="badge">评论人：{{ item.name }}</span>
                {{ item.content }}
            </li>
        </ul>
        
    </div>

    <template id="temp"> 
        <div>
            <div class="form-group">
                <label>评论人：</label>
                <input type="text" class="form-control" v-model="name">
            </div>   
             <div class="form-group">
                <label>评论内容：</label>
                <textarea class="form-control" v-model="content"></textarea>
            </div>
            <div class="form-group">       
                <button class="btn btn-primary" v-on:click="add()">发表评论</button>
            </div>
        </div>
    </template>
    
    

    <script>
        var contentBox = {
            template: '#temp',
            data: function () {
                return {
                    name: '',
                    content: ''
                }
            },
            methods: {
                add: function () {
                    var comment = {
                        id: new Date(),
                        name: this.name,
                        content: this.content
                    }
                    if (!comment.id || !comment.name || !comment.content) {
                        return false 
                    }
                    var list = JSON.parse(localStorage.getItem('cmts') || "[]")
                    list.unshift(comment)
                    localStorage.setItem('cmts', JSON.stringify(list))
                    this.name = this.content = ''
                    this.$emit('func')
                }
            }
        }

        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {
                        id: new Date(),
                        name: '李白',
                        content: '天生我才必有用'
                    },
                    {
                        id: new Date(),
                        name: '江小白',
                        content: '劝君更尽一杯酒'
                    },
                    {
                        id: new Date(),
                        name: 'zq',
                        content: '要做就做好，不做就拉倒'
                    }
                ]
            },
            created: function () {
                this.getData()
            },
            methods: {
                getData: function () {
                    var list = JSON.parse(localStorage.getItem('cmts') || "[]")
                    this.list = list
                }
            },
            components: {
                'text1': contentBox
            }
        });
    </script>
</body>

</html>

天马行空zqzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue 评论小案例

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
复制链接

扫一扫