v-if
data变量 age=18
<div>
<p v-if="age>18">我成功了</p>
<p v-else-if="age==18">我今天正好18岁</p>
<p v-else>我还小了</p>
</div>
打印为我今天正好18岁
因为 v-if 是一个指令,他必须依附于某个元素。但如果我们想要切换不止一个元素呢?在这种情况下我们可以在一个 元素上使用 v-if,这只是一个不可见的包装器元素,最后渲染的结果并不会包含这个 元素。
v-show
data中变量 sex:"man"
<p v-show="sex=='man'">男生</p>
<p v-show="sex=='woman'">女生</p>
结果为男生
v-if与v-show不同点
v-if:如果后面为false,对应属性的以及子元素都不会被渲染,控制dom元素的创建和销毁,一次性使用
v-show仅切换了该元素上名为 display CSS 属性,v-show的元素始终会呈现在DOM上适合频繁切换使用
并且v-show不支持在 <template> 元素上使用也不支持v-else
v-for
data中
itemsobj:{
name:'张三',
age:18,
sex:'男'
}
<ul>
<li v-for="(item,key,index) in itemsobj" :key="index">{{ item }}--{{ index }}</li>
</ul>//成功遍历出来
item为键值 key为键名
为什么要有key值 :通过 key 管理状态
在用v-for时,需要用到key,为了给 Vue 一个提示,以便它可以跟踪每个节点的标识,从而重用和重新排序现有的元素
数组更新检测(复习)
bbb(){
// 通过索引值去修改数组 ,vue3可以用
this.sadfsda[1]=99
// push() 给数组末尾添加元素 ...item
this.sadfsda.push(6,7,8)
// pop() 删除数组末尾元素
this.sadfsda.pop()
// shift() 删除数组的第一位
this.sadfsda.shift()
// unshift() 给数组首位添加元素 ...item
this.sadfsda.unshift(111,222)
// splice() //增删改 删除元素、插入元素、替换元素
// 第一位表示索引值,第二位表示删除几个,后面表示插入
this.sadfsda.splice(1,4,9,8,7,6)
// sort() 排序 从小到大
this.sadfsda.sort()
// reverse() 翻转
this.sadfsda.reverse()
}
事件处理
data(){
return{
conter:0,
age:18
}
},
methods:{
addConter(Number,e){
this.conter+=Number
console.log(e);
},
addage(){
this.age++
}
}
<div>
<!-- js表达式 -->
<h2 @click="conter++">{{ conter }}</h2>
<!-- 绑定事件 没有传递参数 -->
<h2 @click="addConter(3)">{{ conter }}</h2>
<!-- 绑定事件,传递参数 并且有事件对象-->
<h2 @click="addConter(3,$event)">{{ conter }}</h2>
<!-- 一个事件,绑定多个事件函数 -->
<h2 @click="addConter(3),addage()">{{ conter }} ---- {{ age }}</h2>
</div>
常见事件修饰符(鼠标键盘)
<template>
<div>
<!-- 事件修饰符停止冒泡 .stop -->
<div @click="divClick">
<button @click.stop="btnClick">111111</button>
</div>
<!-- prevent 阻止默认行为 -->
<form action="">
<input type="submit" value="提交" @click.prevent="aaa">
<hr>
<br>
<!-- .once 只触发一次回调 -->
<button @click.once="bbb">只触发一次</button>
<!-- 按键修饰符 -->
</form>
<input type="text" @keyup.enter="ccc">
</div>
</template>
按键别名:
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
v-model语法糖原理双向绑定
通过v-bind绑定一个value属性与v-on给当前元素添加一个input事件
<input type="text" v-model="msg">
<p>{{ msg }}</p>
<input type="text" :value="msg" @input="changgeValue">
data(){
return{
msg:"hahfije"
}
},
methods:{
changgeValue(e){
console.log(e);
this.msg=e.target.value
}
}
v-model 单、多选框 下拉列表
<script>
export default{
data(){
return{
msg:"",
shuiguo:[],
sex:"man",
chengshi:"张家界",
chengshis:" "
}
},
}
</script>
<template>
<div>
<!-- 勾选框 -->
<!-- 单个勾选框 则为布尔值 -->
<input type="checkbox" v-model="msg">dsaf
<h2>{{ msg }}</h2>
<!-- 多个勾选框 -->
<input type="checkbox" v-model="shuiguo" value="苹果">苹果
<input type="checkbox" v-model="shuiguo" value="香蕉">香蕉
<input type="checkbox" v-model="shuiguo" value="荔枝">荔枝
<input type="checkbox" v-model="shuiguo" value="菠萝">菠萝
<h2>我喜欢{{ shuiguo }}</h2>
<!-- 单选框 -->
<input type="radio" v-model="sex" value="男">男
<input type="radio" v-model="sex" value="女">女
<h2>{{ sex }}</h2>
<!-- 下拉列表 选项框 -->
<!-- 单选 -->
<select name="" id="" v-model="chengshi">
<option value="张家界">张家界</option>
<option value="北京">北京</option>
<option value="河北">河北</option>
</select>
<h2>{{ chengshi }}</h2>
<!-- 多选框 multiple多选-->
<select name="" id="" v-model="chengshis" multiple>
<option value="张家界">张家界</option>
<option value="北京">北京</option>
<option value="河北">河北</option>
</select>
<h2>{{ chengshis }}</h2>
</div>
</template>
v-model 修饰符
v-model.lazy 输入框失去焦点(回车),再同步输入框数据
v-model.number 读取数字类型
v-model.trim 自动去除输入的首尾空白字符