2.vue3 修饰符 按键修饰符 其他指令 计算属性

v-model

修饰符

.lazy ——监听 change 事件而不是 input
.number ——将输入的合法符串转为数字
.trim ——移除输入内容两端空格

v-on 修饰符

​ stop 阻止冒泡

​ capture 捕获模式

​ prevent 阻止默认行为

​ once 响应一次

​ self 只有自身响应事件

按键修饰符

.enter

.esc

vfor遍历数字字符串对象

 <div id="box">
        <!-- vfor遍历数字 -->
        <ul>
            <li v-for="n in 12"> {{n}}</li>
        </ul>
        <!-- vfor可以遍历字符串 -->
        <span v-for="(char,index) in str">{{char}}
            <a href="#" v-if="index<str.length-1">
              -  
            </a>
            </span>
        <!-- vfor遍历对象 -->
        <ul>
            <li v-for="(value,key,index) in obj">
                {{key}}--{{value}}---{{index}}
            </li>
        </ul>
    </div>

其他指令

v-html 渲染html代码

v-text 相当于差值表达式

v-pre 跳过编译这个元素和它的子元素的模板

v-once 只渲染一次，忽略更新

v-cloak 编译模板过程存在的指令，编译后自动取消

计算属性

 computed:{   
                //计算属性 根据数据的变化自动计算更新最新的值
                //数据变，值就变，数据不变，取缓存
                reverseStr(){
                    return this.str.split("").reverse().join("")+Math.random()
                }
            },
  computed:{
                select:{
                    get(){  //读取时执行
                        // return this.sel
                        //每一项目选中这个全选按钮才选中，有一个不选中就不选
                        return this.list.every(item=>item.flag)
                    },
                    set(v){   //修改时会执行
                        // this.sel=v;
                      //全选全部选功能
                        this.list.forEach(item=>item.flag=v)
                    }
                }
            },