zoukankan      html  css  js  c++  java
  • Vue 变异方法unshift&pop&shift

    <!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 in list">
                {{v.content}}
            </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 变异方法unshift&pop&shift'
            }
        });
        var app = vue({
            el:'#ask',
            data:{
                content:'',
                list:[
                    {'content':'hello'},
                    {'content':'简单记录'}
                ]
            },
            methods:{
                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>
  • 相关阅读:
    R中seurat等问题学习
    主成分分析PCA学习一条龙
    PAT 1116 Come on! Let's C [简单]
    PAT 1077 Kuchiguse [一般]
    R中的一些基础1106
    PAT 1036 Boys vs Girls[简单]
    稳定婚姻匹配问题模板
    University Entrace Examination zoj1023
    Stable Match
    7-1 玩转二叉树
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11641271.html
Copyright © 2011-2022 走看看