问答详情
源自:3-2 todolist组件拆分

直接点击提交的话会产生<li></li>,怎么清除没有内容的li呢?

直接点击提交的话会产生<li></li>,怎么清除没有内容的li呢?

提问者:buyaolanduo 2018-08-13 22:41

个回答

  • 慕圣2166340
    2018-10-10 11:42:06

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>TodoList</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style type="text/css">

    table{border-right:1px solid #F00;border-bottom:1px solid #F00;margin: 0 auto;} 

    table td{border-left:1px solid #F00;border-top:1px solid #F00} 

    </style>

    </head>

    <body>

    <div id="app">

    <table>

    <tr>

    <td>

    <input type="text" v-model="Values"/>

    </td>

    <td>

    <button @click="firstclick">点一下</button>

    </td>

    <td>

    <button @click="clearclick">清理</button>

    </td>

    </tr>

    <tr>

    <td>编号</td>

    <td>姓名</td>

    <td>操作</td>

    </tr>

    <tr v-for="(item,index) of list">

    <td>{{index}}</td>

    <td>{{item}}</td>

    <td><button @click="delect(index)">删除</button></td>

    </tr>

    </table>

    </div>

    <script type="text/javascript">


    Vue.component()


    var vue=new Vue({

    el: '#app',

    data:{

    Values : '',

    list : []

    },

    methods : {

    firstclick:function(){

    this.list.push(this.Values);

    this.Values='';

    },

    delect:function (index) {

    this.list.splice(index,1);

    },

    clearclick:function(){

    for(var i=0;i<this.list.length;i++){

    if(!this.list[i]){

    this.list.splice(i,1);

    }

    }

    }

    }

    })

    </script>

    </body>

    </html>


    就增加一个方法“clearclick”,检查list数组里面有没有空值,如果有,就根据空值的index将这项删除掉。

  • jason6p
    2018-08-21 23:36:02

    methods: {
        handleClick: function () {
            if (this.inputValue) {
                this.list.push(this.inputValue);
                this.inputValue = '';
            }
        }
    }


    handleClick时,检查

    this.inputValue

    是否为空值

  • 慕粉1409334980
    2018-08-13 23:45:32

    重新设一个按钮,添加清除所有内容事件<button @click="handleDestroy">清除所有任务</button>,在父组件中实现删除所有内容函数

    handleDestroy:function(){

    this.list.splice(0)

    }