你要找的Vue3干货都在这里了，干不干你说了算！你要找的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 综合案例
【你要找的Vue3干货都在这里了，干不干你说了算！】下面一起来看一个综合案例TodoList，它将是本篇文章的最强总结

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

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