VUE 基础(四)

最新推荐文章于 2024-08-05 19:23:36 发布

相逢亦逢春

最新推荐文章于 2024-08-05 19:23:36 发布

阅读量184

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_80034662/article/details/140839323

版权

1 列表过滤

两种实现方法

(1)用watch属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
   
    <div id="app">
        <input type="text" placeholder="请输入查询姓名" v-model="keyword">
      
        <ul>
            <li v-for="(item,index) in filtpersons" :key="index">{{item.name}} {{item.age}} </li>
        </ul>
     
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                keyword:'',
                persons:[
                    {id:1, name:"零四",age:18},
                    {id:2, name:"张三",age:19},
                    {id:3, name:"王武",age:20}
                ],
                filtpersons:[]
              
            },
            methods: {
              
            },
            watch:{
                keyword:{
                    immediate:true,
                    handler(val){
                        this.filtpersons=this.persons.filter((p)=>{
                            return p.name.indexOf(val)!=-1
                        })
                    }
                }
            }
         
        });
    </script>
</body>
</html>

(2)用computed计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
   
    <div id="app">
        <input type="text" placeholder="请输入查询姓名" v-model="keyword">
      
        <ul>
            <li v-for="(item,index) in filtpersons" :key="index">{{item.name}} {{item.age}} </li>
        </ul>
     
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                keyword:'',
                persons:[
                    {id:1, name:"零四",age:18},
                    {id:2, name:"张三",age:19},
                    {id:3, name:"王武",age:20}
                ],
           
              
            },
            methods: {
              
            },
            computed:{
                filtpersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!=-1
                    }
                       
                )
                }
            }
         
        });
    </script>
</body>
</html>

2 列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
   
    <div id="app">
        <input type="text" placeholder="请输入查询姓名" v-model="keyword">
        <button @click="sorttype=2">年龄升序</button>
        <button @click="sorttype=1">年龄降序</button>
        <button @click="sorttype=0">原顺序</button>
        <ul>
            <li v-for="(item,index) in filtpersons" :key="index">{{item.name}} {{item.age}} </li>
        </ul>
     
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                keyword:'',
                sorttype:0,  
                persons:[
                    {id:1, name:"零四",age:18},
                    {id:2, name:"张三",age:19},
                    {id:3, name:"王武",age:20}
                ],
           
              
            },
            methods: {
              
            },
            computed:{
                filtpersons(){
                    const arr= this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!==-1
                    }
                       
                )
                if(this.sorttype!=0){
                    arr.sort((a,b)=>{
                        return this.sorttype===1 ?b.age-a.age: a.age-b.age
                    })
                }
                return arr
                }
            }
         
        });
    </script>
</body>
</html>

3 vue.set()方法:在data中添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
</style>
<body>
   
    <div id="app">
        <button @click="add">添加性别属性，默认是男</button>
        <p>姓名: {{name}}</p>
        <p>年龄: {{age}}</p>
        <p v-if='sex'>性别: {{sex}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "里斯",
                age: 18,
                sex: ''
            },
            methods: {
                add() {
                    Vue.set(this, 'sex', '男');
                }
            }
        });
    </script>
</body>
</html>