vue 实现全选和反选

最新推荐文章于 2024-06-13 07:34:25 发布

vues

最新推荐文章于 2024-06-13 07:34:25 发布

阅读量1.4k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/hbwang_716/article/details/106632676

版权

vue 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

1、vue实现全选和反选，使用vue的computed的set方法实现双向绑定

<!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>
<body>
    <div id="app">
        全选 <input type="checkbox" v-model="checkAll">

        <input type="checkbox" v-for="(item,index) in checks" v-model="item.value" :key="index">
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    <script>
        // methods和watch 没有关系
        let vm=new Vue({
            el:'#app',
            data:{
               checks:[
                   {value:true},
                   {value:false},
                   {value:true}
               ]
            },
            methods:{
              
            },
            computed:{
                checkAll:{
                    get(){
                        return this.checks.every(check=>check.value);
                    },
                    set(value){  //双向绑定数据  会使用set方法
                        this.checks.forEach(check=>check.value=value);
                    }
                }
            }
        });
        
    </script>
</body>
</html>

2、vue的生命周期

<!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>
<body>
    <div id="app">
        {{a}} {{b}}
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                a:1,
                b:1
            },
            beforeCreate(){   // 初始化自己的生命周期，并且绑定自己的事件
                console.log(this,this.$data)
            },
            created(){  //如果想调用ajax 可以获取数据和调用方法
                console.log(this.$data);
            },
            beforeMount(){ // 第一次调用渲染函数之前
                console.log('渲染前');
            },
            mounted(){ //获取真实dom,因为页面已经渲染完了
                console.log("渲染后",this.$el.innerHTML);
                this.a=100;

                this.timer=setInterval(() => {
                    
                }, 3000);
            },
            beforeUpdate(){
                this.b=200;
                console.log('更新前');
            },
            updated(){  //一般不要操作数据 可能会导致死循环
                console.log('更新后');
            },
            beforeDestroy(){ //销毁前  当前实例还可用，
                clearInterval(this.timer);
            },
            destroyed(){ // 实例上的方法、监听都被移除掉。

            }
        });
        // 调用销毁
        //第一种 路由切换;  第二种：手动销毁：vm.$destroy();
    </script>
</body>
</html>

3、vue的全局组件和局部组件

<!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>
<body>
    <div id="app">
        <my-button></my-button>
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    <!--组件化开发的优点  方便协作  方便维护 复用-->

    <!--组件的定义 一共有2种 全局组件 局部组件-->
    <script>
        // 全局组件
        /* Vue.component('my-button',{
            template:`<button>{{message}}</button>`,
            data(){ //为了每个组件的数据 互不影响
                return{
                    message:'点我啊'
                }
            }
        }); */
        let vm=new Vue({ //根实例
            el:'#app',
            data:{
                a:1,
                b:1
            },
            components:{  //子组件在父组件的模板中使用
                'myButton':{
                    template:`<button>{{message}}</button>`,
                    data(){ //为了每个组件的数据 互不影响
                        return{
                            message:'点我啊'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>

4、vue中的 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>
<body>
    <div id="app">
        {{getFullName}}
        {{msg}}
    </div>
    <script src="../node_modules/_vue@2.6.11@vue/dist/vue.js"></script>
    <script>

        // computed 和 methods 的区别  computed有缓存
        // computed 和 watch的区别 watch支持异步 watch可以实现一些简单的功能，先用计算属性来实现。
        let vm=new Vue({
            el:'#app',
            data:{
                firstName:'hello',
                lastName:'world',
                msg:'vue,',
                fullName:''
            },
            computed:{
                getFullName(){   //Object.defineProperty 来实现
                    console.log('哈哈哈');  //get方法
                    return this.firstName+this.lastName
                }
            },
            mounted(){
                this.fullName();
            },
            methods:{
                getFullName(){
                    this.fullName=this.firstName+this.lastName
                }
            },
            watch:{
                firstName:{
                    handler(newValue){
                        setTimeout(() => {
                            this.getFullName();
                        }, 1000);
                    },
                    immediate:true,  //立即执行 可以不再mounted里面先调用一次
                    deep:true,
                },
                lastName(){
                    this.getFullName();
                }
            }
        });
        // 调用销毁
        //第一种 路由切换;  第二种：手动销毁：vm.$destroy();
    </script>
</body>
</html>

vues

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 实现全选和反选

1、vue实现全选和反选，使用vue的computed的set方法实现双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>&.
复制链接

扫一扫