zoukankan      html  css  js  c++  java
  • Vue 变异方法splice删除评论功能

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="vue.js"></script>
        <title id="title">{{title}}</title>
    </head>
    <body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <ul>
            <li v-for="(v,k) in list">
                {{v.content}}<button v-on:click="remove(k)">删除</button>
            </li>
        </ul>
        <textarea v-model="content" cols="30" rows="10"></textarea>
    
        <button v-on:click="push('pre')">发表到前面</button>
        <button v-on:click="push('end')">发表到后面</button>
        
    
        <button v-on:click="del('first')">删除第一条</button>
        <button v-on:click="del('last')">删除最后一条</button>
    </div>
    <script>
        var vue = function (options){new Vue(options)};
        vue({
            el:'#title',
            data:{
                title:'Vue 变异方法splice删除评论功能'
            }
        });
        var app = vue({
            el:'#ask',
            data:{
                content:'',
                list:[
                    {'content':'ask.mykeji.net'},
                    {'content':'简单记录'}
                ]
            },
            methods:{
                remove(k){
                    this.list.splice(k,1)
                },
                push(type){
                    var content_push = {'content':this.content};
                    switch (type) {
                        case 'pre':
                            this.list.unshift(content_push);
                            break;
                        case "end":
                            this.list.push(content_push);
                            break;
                    }
                    this.content='';
                },
                del(type){
                    switch (type) {
                        case 'first':
                            this.list.shift();
                            break;
                        case "last":
                            this.list.pop();
                            break;
                    }
                }
            }
        });
    
    </script>
    </body>
    </html>
  • 相关阅读:
    python爬虫出现的状态码
    FreeSWITCH部署与功能配置
    爬虫读取内容常见的3种方式
    python:3种爬虫的优缺点
    JSON数据解析
    FreeSWITCH与FreeSWITCH对接
    FreeSWITCH添加中文语音
    异步加载技术与逆向工程概念
    word页眉与页脚详解
    修改MyEclipse内存
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11641289.html
Copyright © 2011-2022 走看看