1 表单绑定
1.文本与多行文本的绑定
01 文本
<input v-model="msg" /><p>{{ msg }}</p>02 多行文本
<p style="white-space: pre-line;">{{ msg2 }}</p><br /><textarea v-model="msg2" ></textarea>2.复选框checkbox
01 单个复选框
<input type="checkbox" id="checkbox" v-model="checked" /><label for="checkbox">{{ checked }}</label>02 多个复选框
<div id="app"> <input type="checkbox" id="name1" value="小明" v-model="checkedNames"> <label for="name1">小明</label> <input type="checkbox" id="name2" value="小红" v-model="checkedNames"> <label for="name2">小红</label> <input type="checkbox" id="name3" value="mumu" v-model="checkedNames"> <label for="name3">mumu</label> <br> <span>抉择的名字是: {{ checkedNames }}</span></div>data() { return { checkedNames: []}3.单选框radio
<label><input type="radio" value="1" v-model="sex">男</label><label><input type="radio" value="2" v-model="sex">女</label><label><input type="radio" value="3" v-model="sex">窃密</label><p>{{sex}}</p>data() { return { sex:1}4.抉择框select
<div id="v-model-select" class="demo"> <select v-model="selected"> <option disabled value="">请抉择</option> <option>学前班</option> <option>小学</option> <option>初中</option> </select><p>{{select}}</p>5.表单修饰符
.lazy 你能够增加 lazy 修饰符，从而转为在 change 事件之后进行同步，在“change”时而非“input”时更新
<input v-model.lazy="msg" />.number 如果想主动将用户的输出值转为数值类型，能够给v-model 增加number 修饰符
<input v-model.number="age" type="text" />.trim 过滤首尾空白
<input v-model.trim="msg" />2 计算computed
对于任何蕴含响应式数据的简单逻辑，你都应该应用计算属性（从现有数据计算出新的数据）
<p>计算翻转的信息: {{ rmsg }}</p>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 做了专门的加强。表达式后果的类型除了字符串之外，还能够是对象或数组。
<div class="static" :class="{ active: isActive, 'text-danger': hasError }">你好class绑定</div>data() { return { isActive: true, hasError: false }}下面的语法示意 active 这个 class 存在与否将取决于 isActive 的值。
02 Style内联款式的绑定
对象语法:
CSS 属性名能够用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>5 综合案例
上面一起来看一个综合案例TodoList，它将是本篇文章的最强总结
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 按下回车把文本框的内容增加到list列表外面 --> <h1>每日清单</h1> <input type="text" placeholder="请输出打算" @keyup.enter="addItem" v-model.trim="temp"> <h3>未实现{{undoList.length}}</h3> <div class="list"> <div class="item" v-for="(item,index) in undoList" :key="item.tittle"> <input type="checkbox" v-model="item.done"> {{item.tittle}} <button @click="removeItem(item)">×</button> </div> </div> <h3>已实现{{doneList.length}}</h3> <div class="list"> <div class="item" v-for="(item,index) in doneList" :key="item.tittle"> <input type="checkbox" v-model="item.done"> {{item.tittle}} <button @click="removeItem(item)">×</button> </div> </div> </div> <script> Vue.createApp({ watch:{ "list":{ handler(nval){ localStorage.setItem("list",JSON.stringify(this.list)) }, deep:true, } }, computed:{ doneList(){ // 只有list外面数据done为true就保留 return this.list.filter(item=>item.done) }, undoList(){ return this.list.filter(item=>!item.done) } }, data() { return { // 寄存列表的数据 // JSON.parse(str) 把str字符串转换为js对象 // localStorage.getItem(key)获取到本地存储值 // var str = A||B 如果A是转换布尔值为false 那么str 的值就是B // A如果转换为true 那么str的值是A list:JSON.parse(localStorage.getItem("list")||"[]"), temp:'' //寄存输入框的数据 } }, methods:{ addItem(){ //增加 // 在列表外面增加temp数据 this.list.unshift({tittle:this.temp,done:false}); // 增加结束清空temp this.temp = ""; }, removeItem(item){ //删除 console.log(item); var ind = this.list.indexOf(item); this.list.splice(ind,1) } } }).mount("#app") </script> </body></html>