vue评论小实例

最新推荐文章于 2023-04-24 17:36:14 发布

321yanqing

最新推荐文章于 2023-04-24 17:36:14 发布

阅读量161

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_40319828/article/details/82865645

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

    <style>
        .list li{
            list-style-type: none;
            padding-bottom: 5px;
        }
       .tit{
           display: flex;
       }
        .title{
            width: 300px;
            margin-bottom:2px;
        }
        .con{
            display:flex;
        }
        .con span {
            vertical-align:top;  
        }
        .content{
            width: 299px;
            height: 200px;
            margin-bottom: 5px;
            /* display: inline-block; */
        }
        .comments button{
            width: 80px;
            height:40px;
            margin:5px 50px;
            text-align: center;
        }
        
    </style>
</head>
<body>
    <div id="app">
        {{message}}
        <ul class="list">
             <li v-for="comment in comments">
                <span>标题：</span>
                <span>{{comment.title}}</span><br>
              <span>内容：</span>
              <span style="color:rebeccapurple">{{comment.content}}</span>
            </li>  
        </ul>
        <div class="comments">
            <div class="tit">
                <sapn>标题：</sapn>
                <input type="text" v-model="comment.title" class="title">
            </div>
            <div class="con">
                <sapn>内容：</sapn>
                <textarea  v-model="comment.content" class="content"></textarea><br>
            </div>
            <button v-on:click="submit">提交</button>
        </div>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
    el: '#app',
    data: {
        message: '评论显示处：',
        comments:[
            {   
                index:1,
                title:'vue项目1',
                content:'hehe'
            },
            {
                title:'vue项目2',
                content:'haha'
            } 
        ],
        comment:{
            title:"",
            content:""
        }
    },
    methods:{
        submit(){
          if(this.comment.title && this.comment.content){
              this.comments.push(this.comment);
              this.comment={
                  title:"",
                  content:""
              }
          }else{
              alert("请输入数据！")
          }
        }
    }
    })
</script>

321yanqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue评论小实例

&lt;style&gt; .list li{ list-style-type: none; padding-bottom: 5px; } .tit{ display: flex; } .title{ width: 30...
复制链接

扫一扫

专栏目录