共计 3545 个字符，预计需要花费 9 分钟才能阅读完成。
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>
正文完