前端学习vue第二天（P18--P37）

xiaoxiaosu233

已于 2022-03-27 09:50:17 修改

阅读量341

点赞数

分类专栏：前端学习文章标签：前端 vue.js

于 2022-03-27 09:49:32 首次发布

本文链接：https://blog.csdn.net/xiaoxiaosu233/article/details/123609918

版权

前端学习专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、计算属性

1、定义：要用的属性不存在，需要通过计算得来

2、原理：底层借助了getter和setter

3、get函数执行

（1）初次读取（2）数据发生改变

4、优势：与methods实现相比，内部有缓存机制，效率更高

5、计算属性最终出现在vm上，直接读取即可

6、需要用setter去修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--    引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<!--准备一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"><br><br>
    名：<input type="text" v-model="lastName"><br><br>
    姓名：<span>{{fullName}}</span>
</div>
</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
            fullName:{
                //get作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //初次读取fullName时，所依赖的数据发生变化时，get会被调用
                get(){
                    return this.firstName+'-'+this.lastName
                },
                //set当fullName被修改时调用
                set(value){
                    const arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>
</html>

二、绑定

三、列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--    引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <ul>
        <li v-for="p in persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ]
        }

    })
</script>
</html>

列表过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--    引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model = "keyWord">
    <ul>
        <li v-for="p in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
    //用watch实现
    // new Vue({
    //     el:'#root',
    //     data:{
    //         keyWord:'',
    //         persons:[
    //             {id:'001',name:'马冬梅',age:19,sex:"女"},
    //             {id:'002',name:'周冬雨',age:20,sex:"女"},
    //             {id:'003',name:'周杰伦',age:21,sex:"男"},
    //             {id:'004',name:'温兆伦',age:22,sex:"男"}
    //         ],
    //         filPersons:[]
    //     },
    //     watch:{
    //         keyWord:{
    //             immediate:true,
    //             handler(val){
    //                 this.filPersons=this.persons.filter((p)=>{
    //                     return p.name.indexOf(val) !==-1
    //             })
    //
    //             }
    //         }
    //     }
    //
    // })

    //用computed实现
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'马冬梅',age:19,sex:"女"},
                {id:'002',name:'周冬雨',age:20,sex:"女"},
                {id:'003',name:'周杰伦',age:21,sex:"男"},
                {id:'004',name:'温兆伦',age:22,sex:"男"}
            ],
        },
        computed:{
            filPersons(){
                return this.persons.filter((p)=>{
                  return p.name.indexOf(this.keyWord) !==-1
                })
            }
        }

    })

</script>
</html>

列表排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--    引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="root">
    <h2>人员列表</h2>
    <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="p in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

</body>
<script>
    //阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;


    //用computed实现
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            sortType:0,//0是原顺序，1是升序，2是降序
            persons:[
                {id:'001',name:'马冬梅',age:29,sex:"女"},
                {id:'002',name:'周冬雨',age:10,sex:"女"},
                {id:'003',name:'周杰伦',age:21,sex:"男"},
                {id:'004',name:'温兆伦',age:22,sex:"男"}
            ],
        },
        computed:{
            filPersons(){
                const arr= this.persons.filter((p)=>{
                    return p.name.indexOf(this.keyWord) !==-1
                });
                if(this.sortType){
                    arr.sort((a,b)=>{
                        return this.sortType===1? b.age-a.age : a.age-b.age
                    })
                }
                return arr;
            }
        }

    })

</script>
</html>

xiaoxiaosu233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习vue第二天（P18--P37）

一、计算属性1、定义：要用的属性不存在，需要通过计算得来2、原理：底层借助了getter和setter3、get函数执行（1）初次读取（2）数据发生改变4、优势：与methods实现相比，内部有缓存机制，效率更高5、计算属性最终出现在vm上，直接读取即可6、需要用setter去修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫