页面预览:(加载需要点时间,请耐心等待或者刷新)

https://vue.magicbeans001.work/vue/fin1.html

以下是思路:

  • v-model绑定属性,当点击添加按钮时候,调用click实践触发add方法。
  • 文本框通过@keyup.enter绑定回车,当敲击回车时,调用click实践触发add方法。
  • v-for循环来输出数据,输出数据是通过文本框双向绑定keywords,来调用search返回一个包含搜索文本框内的字符内容的list并返回页面。
  • :key=""用来使得按钮button绑定id来方便进行删除,每一个删除按钮对应循环内每一行内的数据。

附件下载:

vue1.zip

以下是代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./css/bootstrap-3.3.7.css" />
    <link rel="stylesheet" href="./css/animate.css" />
</head>
<body>
<div id="app">
    <header>
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" v-model="id" @keyup.enter="add" placeholder="id">
            </label>

            <label>
                Name:
                <input type="text"  class="form-control" v-model="name" @keyup.enter="add" placeholder="name">
            </label>

            <button class="btn btn-primary" @click="add">添加</button>
            <button class="btn btn-primary" @click.prevent="delAll">删除</button>

            <label>
                搜索:
                <input type="text"  class="form-control" v-model="keywords">
            </label>
        </div>
    </header>

    <article class="table table-bordered table-hover table-striped">
        <table class="table table-bordered table-hover table-striped">
            <tr>
                <th>select</th>
                <th>Id</th>
                <th>Name</th>
                <th>active</th>
            </tr>

            <tr v-for="item in search(keywords)" :key="item.id">
                <td><input type="checkbox" :value="item.id" v-model="course"></td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><a href="" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </table>
    </article>

    <footer>

    </footer>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            keywords:'',
            list:[
                {id:1,name:"a"},
                {id:2,name:"b"},
            ],
            course:[]
        },
        methods:{
            add(){
                if(this.id==""){
                    return alert("请输入id内容")
                }else if(this.name==""){
                    return alert("请输入name内容")
                }else{
                    var item = {id:this.id,name:this.name}
                    this.list.push(item)
                    this.id=''
                    this.name=''
                }
            },
            del(delId){
                this.list.some((item,i)=>{
                    if(delId==item.id){
                        this.list.splice(i,1)
                        return true;
                    }
                })
            },
            search(keywords){
                var newlist=[]
                this.list.forEach(item=>{
                    if(item.name.includes(keywords)){
                        newlist.push(item)
                    }
                })
                return newlist;
            },
            delAll(){
                this.list.some((item,i)=>{
                    this.course.some(j=>{
                        if(item.id==j){
                            this.list.splice(i,1)
                        }
                    })
                })
                this.course=[]
            }
        }
    })
</script>
</body>
</html>
最后修改:2020 年 10 月 21 日 12 : 11 AM
如果觉得我的文章对你有用,请随意赞赏