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><html><head lang="en">&

new nm个对象

4690人浏览 · 2021-06-06 17:59:51

new nm个对象 · 2021-06-06 17:59:51 发布

一.vue中的判断指令

1.判断指令的使用

在这里插入图片描述

vue中的判断指令使用v-if="true/false"，v-else-if="true/false"，v-else来完成。其中v-if和v-else-if后面跟的表达式或者变量值必须为布尔类型。
当条件判断不满足时，页面不会加载对应的标签及子标签。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<ul>
		<!--遍历数组，并只取出数组中的值-->
		<li v-for="name in names">{{name}}</li>
		<!--遍历数组，并取出数组中的值及其索引-->
		<li v-for="(name,index) in names">{{index}}----{{name}}</li>
	</ul>
</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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<ul>
		<!--遍历对象，并只取出对象的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>
	</ul>
</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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<ul>
		<!--需要保证每个标签的key唯一，否则无法达到优化性能的目的-->
		<!--在数组的元素内容不重复的情况下，可以使用name作为key值。如果不能保证name的唯一性，那么意义不大-->
		<!--不要使用数组的索引作为key值，因为插入新值会导致数组索引变化，也不能达到优化性能的目的-->
		<li v-for="name in names" :key="name">{{name}}</li>
	</ul>
</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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<div id="app">
	<ul>
		<li v-for="name in names">{{name}}</li>
	</ul>
</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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^