三 、v-if v-show v-for条件渲染、数组更新检测、事件处理 v-model修饰符

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 自动去除输入的首尾空白字符