你要找的Vue3干货都在这里了，干不干你说了算！

1 表单绑定

1.文本与多行文本的绑定

01 文本


{{ msg }}

02 多行文本

{{ msg2 }}

2.复选框checkbox

01 单个复选框


{{ checked }}

02 多个复选框


   
   小明
   
   小红
   
   mumu
   

   选择的名字是: {{ checkedNames }}


data() {
  return {
  checkedNames: []
}

3.单选框radio

男
女
保密
{{sex}}

data() {
  return {
    sex:1
}

4.选择框select


  
{{select}}

5.表单修饰符

.lazy 你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步，在“change”时而非“input”时更新

.number 如果想自动将用户的输入值转为数值类型，可以给v-model 添加number 修饰符

.trim 过滤首尾空白

2 计算computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性（从现有数据计算出新的数据）

计算翻转的信息: {{ rmsg }}
Vue.createApp({
  computed: {         
    rmsg: function() {                         
        return this.msg.split('').reverse().join('')
    }
  }
}).mount("#app")

3 watch监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch:{
  num(nval,oval){
    console.log(nval,oval)
  }     
}

引用数据类型需要添加处理器handler与deep

watch:{
  person:{
    handler(state){
        console.log(state);
        localStorage.setItem("age",this.person.age);
    },
    deep:true
  } 
}

4 Class与Style

01 Class类的绑定

操作元素的 class 列表和内联样式因为它们都是 attribute，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

你好class绑定

data() {
  return {
    isActive: true,
    hasError: false
  }
}

上面的语法表示 active 这个 class 存在与否将取决于 isActive 的值。

02 Style内联样式的绑定

对象语法:
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

5 综合案例

下面一起来看一个综合案例TodoList，它将是本篇文章的最强总结



    
        
        
        
    
    
        
            
            每日清单
            
            未完成{{undoList.length}}
            
                
                    
                {{item.tittle}} 
                
            
            
            已完成{{doneList.length}}
            
                
                    
                {{item.tittle}}