vue之watch监听器，filter过滤器,computed计算属性的使用

最新推荐文章于 2023-10-11 21:08:23 发布

可爱又迷人的反派少女

最新推荐文章于 2023-10-11 21:08:23 发布

阅读量561

点赞数

分类专栏： vue基础篇文章标签： vue 过滤器

本文链接：https://blog.csdn.net/weixin_48291770/article/details/109412241

版权

vue基础篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

watch监听器

浅监听
深监听（监听对象或数组中的值，deep属性）

<div id="app">
        <input type="text" v-model = 'question'>
        <input type="text" v-model = 'obj.name'>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                question:'qqq',
                obj:{
                    name:"lili",
                    age:22
                }
            },
            watch:{
                //浅监听
                question(newv,oldv){
                    console.log(newv,oldv);
                },
                //深监听
               obj:{
                    handler(a){
                        console.log(a);
                    },
                    deep:true
               }
            }
        })
    </script>

简单实现百度搜索

jsonp原理：
1.动态创建script标签
2.通过src赋值，
3.得到数据渲染页面
4.回调函数(请求回来的数据)

 <style>
 //选中状态的样式
        .active{
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="app">
    	<!-- 监听用户输入 -->
        <input type="text" v-model = 'search'  @keydown.down = 'down' @keydown.up = 'up' @keydown.enter = 'enter'>
        <ul>
        <!-- 循环遍历数据将其渲染到页面上 -->
            <li v-for = '(item,index) in arr' :class = '[index==n?"active":""]' >{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                search:'',
                arr:[],
                active:'active',
                n:-1
            },
            methods:{
            //键盘向下
                down(){
                    this.n++;
                    if(this.n>this.arr.length-1){
                        this.n = 0;
                    }
                },
                //键盘向上
                up(){
                    this.n--;
                    if(this.n<0){
                        this.n=this.arr.length-1
                    }
                },
                //enter键进入对应搜索
                enter(){
                    if(this.n!=-1){
                        window.open("https://www.baidu.com/s?ie=utf-8&wd="+this.arr[this.n]);
                    }else{
                        window.open("https://www.baidu.com/s?ie=utf-8&wd="+this.search);
                    }
                }
            },
            watch:{
            //动态创建script标签
                search(){
                    let scpt = document.createElement('script');
                    scpt.src = "http://suggestion.baidu.com/su?cb=callback&wd=" + this.search;
                    document.body.append(scpt);
                }
            }
        });
        function callback(res){
            vm.arr = res.s;
        }
    </script>

filter过滤器

全局定义

全局定义
Vue.filter('filterTel',(tel)=>{
    return  tel.slice(0,3)+'****'+tel.slice(7)
})

局部定义

局部定义过滤器
 let vm = new Vue({
        el:'#app',
        data:{
            tel:'18858581199'
        },
        methods: {
            
        },
        filters:{
            filterTel(tel){
                return  tel.slice(0,3)+'****'+tel.slice(7)
            }
        }
        
    })

computed计算属性（监听数据的变化）

let vm = new Vue({
        el:'#app',
        data:{},
        methods: {
            
        },
        computed: {
            ave(){
                // 先求和
                var sum = 0;
                this.list.forEach(item=>{
                    sum+=item.score
                })
                return sum/this.list.length
            }
        },
        
    })

可爱又迷人的反派少女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue之watch监听器，filter过滤器,computed计算属性的使用

watch监听器浅监听深监听（监听对象或数组中的值，deep属性）<div id="app"> <input type="text" v-model = 'question'> <input type="text" v-model = 'obj.name'> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script&g
复制链接

扫一扫