你要找的Vue3干货都在这里了,干不干你说了算!
Mr侯_爱前端 -1 表单绑定1.文本与多行文本的绑定01 文本
<input v-model="msg" />
<p>{{ msg }}</p>
02 多行文本<p >{{ msg2 }}</p>
<br />
<textarea v-model="msg2" ></textarea>
2.复选框checkbox01 单个复选框<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" >
<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与Style01 Class类的绑定操作元素的 class 列表和内联样式 因为它们都是 attribute,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
<div :>你好class绑定</div>
data() {
return {
isActive: true,
hasError: false
}
}
上面的语法表示 active 这个 class 存在与否将取决于 isActive 的值。
02 Style内联样式的绑定对象语法:
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名
<div :></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 >
<div 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 >
<div 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>
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。