【精选】VUE学习笔记：5.vue中判断指令，v-show及v-for的使用_vue 判断

1.判断指令的使用

vue中的判断指令使用 v-if="true/false" ， v-else-if="true/false" ， v-else 来完成。其中v-if和v-else-if后面跟的表达式或者变量值必须为布尔类型。
当条件判断不满足时，页面不会加载对应的标签及子标签。
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
	<!--四个条件判断指令，当前面的判断满足时，不会再执行后面的判断。即最多只会执行一条分支-->
    <h2 v-if="score>=90">优秀</h2>
	<h2 v-else-if="score>=80">良好</h2>
	<h2 v-else-if="score>=60">及格</h2>
	<h2 v-else>不及格</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			score: 0
</script>
</body>
</html>
运行效果如下：
 




    
 
2.判断指令的练习小案例
 

 实现代码如下： 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
	<span v-if="isUserLogin">
		<label for="username">用户账号：</label>
		<input type="text" id="username"/>
	</span>
	<span v-else>
		<label for="email">邮箱地址：</label>
		<input type="text" id="email"/>
	</span>
	<!--`isUserLogin=!isUserLogin`实现对isUserLogin的值取反-->
	<button type="button" @click="isUserLogin=!isUserLogin">切换类型</button>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			isUserLogin: true
</script>
</body>
</html>
效果如下：
  
案例中input标签中内容的复用问题 
二.v-show指令讲解
 

 使用格式：v-show="true/false"，后面跟的表达式或者变量值必须为布尔类型。 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
	<h2 v-if="fag" id="if">你好</h2>
	<h2 v-show="fag" id="show">你好</h2>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			fag: false
</script>
</body>
</html>
运行效果如下：
 




    
 
三.v-for指令的讲解
 
1.v-for遍历数组
 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
		<!--遍历数组，并只取出数组中的值-->
		<li v-for="name in names">{{name}}</li>
		<!--遍历数组，并取出数组中的值及其索引-->
		<li v-for="(name,index) in names">{{index}}----{{name}}</li>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			names: ['zhangsan','lisi','wangwu','xiaoliu']
</script>
</body>
</html>
运行效果如下：
  
2.v-for遍历对象
 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
		<!--遍历对象，并只取出对象的value-->
		<li v-for="value in info">{{value}}</li>
		<!--遍历对象，并取出对象中的key及value-->
		<li v-for="(value,key) in info">{{key}}----{{value}}</li>
		<!--遍历对象，并取出对象中的key,value及索引-->
		<!--实际中很少获取对象索引-->
		<li v-for="(value,key,index) in info">{{index}}---{{key}}----{{value}}</li>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			info: {
				name: 'zhangsan',
				age: 18,
				height: 180
</script>
</body>
</html>
效果如下：
  
3.使用v-for时给标签加上key属性（了解）
 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
		<!--需要保证每个标签的key唯一，否则无法达到优化性能的目的-->
		<!--在数组的元素内容不重复的情况下，可以使用name作为key值。如果不能保证name的唯一性，那么意义不大-->
		<!--不要使用数组的索引作为key值，因为插入新值会导致数组索引变化，也不能达到优化性能的目的-->
		<li v-for="name in names" :key="name">{{name}}</li>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			names: ['zhangsan','lisi','wangwu']
</script>
</body>
</html>
4.数组中哪些方法是响应式的？
 
我们直到vue是响应式的，当我们改变vue实例中的数据时，界面也会随之改变。对于数组也是一样，下面我们演示一下数组中支持响应式的几个方法。
 
 我们还是以一个案例那进行讲解： 
<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<div id="app">
		<li v-for="name in names">{{name}}</li>
</div>
<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>
<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
			names: [
				'我是第1个元素',
				'我是第2个元素',
				'我是第3个元素',
				'我是第4个元素',
				'我是第5个元素',
				'我是第6个元素',
				'我是第7个元素',
				'我是第8个元素',]
</script>
</body>
</html>
push()方法：实现在数组末尾增加元素
 
pop()方法：实现删除数组末尾的元素
 
shift()方法：实现删除数组头部的第一个元素。
 
unshift()方法：实现中数组头部添加元素。
 
splice()方法：实现数组元素的增删改操作。
 
删除元素：splice(参数1,参数2) # 参数1表示从哪个下标开始删除，参数2为需要删除的元素个数。
替换元素：splice(参数1,参数2,参数3,参数4,...) # 参数1表示从哪个下标开始删除，参数2为需要删除的元素个数，后面的参数为需要新增的元素内容
插入元素：splice(参数1,0,参数3,参数4,...) # 参数1表示从哪个下标开始删除，0表示不删除元素，后面的参数为需要新增的元素内容
sort()方法：实现元素的排序
 
reverse()方法：实现元素反转
 
                    一.vue中的判断指令1.判断指令的使用vue中的判断指令使用v-if="true/false"，v-else-if="true/false"，v-else来完成。其中v-if和v-else-if后面跟的表达式或者变量值必须为布尔类型。当条件判断不满足时，页面不会加载对应的标签及子标签。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&
v-if和v-show对比：
1.v-if当条件为false时,压根不会有对应的元素在DOM中。
2.V-show当条件为false时,仅仅是将元素的 display属性设置为none而已。
开发中选择：
-当需要在显示与隐藏之间切片很频繁时,使用 v-show
-当只有一次切换时,通过使用v-if
二、v-for遍历数组
当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成。
v-for的语法类似
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-
<tag :type="Number(scope.row.status) === 2?'success':Number(scope.row.status) === 1?'warning':'info'">
      {{scope.row.status|EnxStatus(scope.row.status)}}
// 通过组件tag的type确定不同颜色，
//:type="Numbe
  <script src="../js/vue.js"></script>
    <div id="app">
        <h1 v-if="isShow">{{message}}</h1><!--当true时会显示false不会显示-->
    <script>
        const app =new Vue({
1、v-if指令
v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否输出该元素。
实例：输出数据对象中属性a和b的值，并根据比较两个属性的值，判断是否输出比较结果
<div id="box">
    <p>a的值是{{a}}</p>
    <p>b的值是{{b}}</p>
<p v-if=“a<b”>a小于b</p>
				在Vue.js中，v-if和v-show都是用于控制DOM元素的显示和隐藏的指令，但它们的实现方式和使用场景有所不同：
1. v-if是动态地添加或移除元素，当条件为false时，元素会被完全移除，当条件为true时，元素会被重新添加到DOM中。因此，v-if适用于很少改变的场景，因为频繁添加和移除元素会影响性能。
2. v-show是通过改变元素的display属性来控制元素的显示和隐藏，当条件为false时，元素将被隐藏，但仍然存在于DOM中。当条件为true时，元素将被显示。因此，v-show适用于频繁切换显示和隐藏的场景，因为它只改变元素的display属性，不会影响DOM的结构。
总的来说，如果需要频繁切换显示和隐藏的元素，应该使用v-show。如果元素很少改变，并且需要在条件为false时从DOM中移除元素，应该使用v-if。