Vue的基础语法（二）

一、条件判断

• v-if、v-else-if、v-else的基本使用

<!--如果条件复杂，则用计算属性来写！-->
<h2 v-if="score>=90">
	优秀
</h2>
<h2 v-else-if="score>=80">
	良好
</h2>
<h2 v-else>
	及格
</h2>
...
<script>
	const app = new Vue({
		data:{
			score: 99
		}
	})
</script>

• 插入一个小知识点：input的复用问题

<!--
	如果两个input在不同条件下显示，
	vue内部会复用，实际上只生成一个input，(当你在输入框输入了内容,然后切换到另一个输入框,里面的内容依然存在的,这就是复用.)
	但如果想区别这两个input，就必须加key这个属性。
-->
<input type="text" id="username" key="username">
<input type="text" id="email" key="email">

• v-show的基本使用

<!--和v-if的用法相似！-->
<h2 v-show="isShow">
	{{message}}
</h2>

• v-if和v-show的区别？
  1.v-if：当条件为false，包含v-if指令的元素，不存在dom中。
  2.v-show： 当条件为false，包含v-show的元素只是display:none隐藏起来了，仍然存在dom中。

• 如何选择？
  1.切换频繁： v-show
  2.只有一次切换：v-if

二、循环遍历

• v-for的基本使用

<!--一、数组遍历-->
<!--1.遍历过程中，没有使用索引值-->
names: ['seven','king','yellow'] 
<ul>
	<li v-for="item in names">{{item}}</li>
</ul>

<!--2.遍历过程中，使用索引值-->
<ul>
	<li v-for="(item,index) in names">{{index+1}} {{item}}</li>
</ul>


<!--二、对象遍历-->
<!--1.只获取一个值，获取的是value-->
info:{
	name:'seven',
	age: 18,
	height: 1.8
}
<ul>
	<li v-for="item in info">{{item}}</li>
</ul>

<!--2.获取key和value，格式(value,key)-->
<ul>
	<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>

<!--2.获取key和value、index-->
<ul>
	<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>

• 组件的key属性（在v-for使用过程，建议绑定key！）

<!--
	动态绑定key，key要具有唯一性！
	作用：使vue内部达到性能的利用！
-->
<li v-for="(item,index) in names" :key="index">{{item}}</li>

• 当插入一个节点时，有key可以快速找到正确的位置并插入，没有key既默认执行diff算法，一个一个地更新。

• 插一个小知识点：数组中哪些方法是响应式的？
  1.push()：在数组最后添加元素
  2.pop()：删除数组最后一个元素
  3.shift()：删除数组第一个元素
  4.unshift()：在数组最前面添加元素
  5.splice()：删除/插入/替换元素
  6.sort()：排序
  7.reverse()：翻转数组
  注意：通过索引值修改数组中的元素，不是响应式的！（this.letters[0]=‘aaaa’ ）

三、表单绑定

• v-model：实现表单元素和数据的双向绑定

<div id="app">
	<input type="text" v-model="message">  <!--双向绑定-->
	{{message}}<!--单向绑定-->
</div>
<script>
	const app= new Vue({
		el:"#app",
		data:{
			message:'seven'
		}
	})
</script>

• v-model的本质/原理

<!--@input：是input内部自带的事件，用于监听用户输入的内容-->
<input type="text" :value="message" @input="valueChange">  
<input type="text" :value="message" @input="message = $event.target.value"> <!--两种写法-->
<script>
...
methods:{
	valueChange(event){
		this.message = event.target.value;
	}
}
</script>

<!--v-model也可以用于textarea元素！-->

• v-model结合xx类型使用

<!--一、结合radio类型-->
<!--
	1.在没有v-model的情况下，要有name属性，radio才是互斥的。
	2.在有v-model的情况下，可省name属性，因为v-model可以让radio互斥。
-->
<input type="radio" id="male" value="男" name="sex" v-model="sex">男
<input type="radio" id="female" value="女" name="sex" v-model="sex">女


<!--二、结合checkbox类型-->
<!--1.单选框（boolean类型）-->
<input type="checkbox" id="agree" v-model="isAgree">
<script>
	data:{
		isAgree: false;
	}
</script>

<!--2.多选框（数组类型）-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<script>
	data:{
		hobbies:[]
	}
</script>


<!--三、结合select类型-->
<!--1.单选（字符串类型）-->
<select name="abc" v-model="fruit">
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="雪梨">雪梨</option>
</select>
<script>
	data:{
		fruit: "香蕉"   //默认初选值
	}
</script>

<!--2.多选（数组类型）-->
<select name="abc" v-model="fruit" multiple>
	<option value="苹果">苹果</option>
	<option value="香蕉">香蕉</option>
	<option value="雪梨">雪梨</option>
</select>
<script>
	data:{
		fruit: []   //默认初选值
	}
</script>

• v-model的值绑定：动态给value赋值

<!--动态给value赋值的时候，input最好绑定label标签！-->
<label v-for="item in Hobbies" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>

<script>
	data:{
		Hobbies: ['football','baseball','pingpong'],
		hobbies:[]
	}
</script>

• v-model的修饰符

<!--1. lazy-->
<input type="text" v-model="message">实时绑定
<input type="text" v-model.lazy="message">失去焦点/回车时再绑定

<!--2. number-->
<input type="number" v-model="age">自动当成字符串类型
<input type="number" v-model.number="age">一直为数字类型,可用typeof进行测试~

<!--3. trim-->
<input type="text" v-model="name">输入的内容中，左右两边有很多空格
<input type="text" v-model.trim="name1">去除左右两边的空格！可看下图的演示结果~