vue指令相关

目录

• vue二指令相关

vue二指令相关

"""
1、表单指令：
    v-model="变量"   变量与value有关
    普通：变量就代表value值
    单选框：变量为多个单选框中的某一个value值
    单一复选框：变量为布尔，代表是否选中
    多复选框：变量为数组，存放选中的选项value

2、条件指令：
    v-show:  display:none
    v-if:    不渲染
    v-if | v-else-if | v-else

3、循环指令：
    v-for="(v, i) in str|arr"
    v-for="(v, k, i) in dic"
    unshift push 首尾增 | shift pop 首尾删
4、sessionStorage | localStorage

5、分隔符：delimiters: ['{{', '}}'],

6、过滤器：
    {{ n1, n2 | f1(30) | f2 }}

    filters: {
        f1(n1,n2,n3) {return 过滤结果},
        f2(f1的res) {return 过滤结果},
    }

7、计算属性：
    computed: {
        result() {
            // 一个方法属性值依赖于多个变量
            return this.n1 + this.n2;
        }
    }

8、监听属性：
    watch: {
       // n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法

            /**
             * 总结：
             * 1、监听的属性需要在data中声明，监听方法不需要返回值
             * 2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
             * 3、监听方法有两个回调参数：当前值，上一次值
             *
             * 解决的问题：多个变量值依赖于一个变量值
             */
        full_name(n, o) {
            this.first_name = n.split('')[0]
            this.last_name = n.split('')[1]
        }
    }

9、冒泡排序：
    for (let i=0; i<arr.length-1; i++) {  // 趟数
        for (let j=0; j<arr.length-1-i; j++) {  // 比较次数
            // 处理条件即可
            if (arr[j]参数 > stus[j + 1]参数) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }

"""