基础语法
v-if
v-if 指令可以实现条件渲染，为 true，结构里有该标签，为false，页面不仅不显示，并且结构中没有该标签。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body bgcolor="pink">
<div id="app">
<h1 v-if="isShow">v-if:条件渲染</h1>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
isShow: true
}
})
</script>
</body>
</html>
v-else-if v-else
可以通过多级判断，渲染一个最终结果。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-else-if</title>
<script src="vue.js"></script>
</head>
<body bgcolor="pink">
<div id="app">
<h3 v-if="score >= 90"> 优秀 </h3>
<h3 v-else-if="score >=80 && score < 90"> 良好 </h3>
<h3 v-else-if="score >=70 && score <80"> 及格 </h3>
<h3 v-else> 牛逼 </h3>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
score: 78
}
})
</script>
</body>
</html>
v-show
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-show</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-show与v-if的区别</h2>
<h1 v-if="isShow"> 使用v-if指令 </h1>
<h1 v-show="isShow"> 使用v-show指令 </h1>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
isShow: false
}
})
</script>
</body>
</html>
可以发现，v-if与v-show使用时，页面效果是一样，不同的是标签消失实现机制，v-if是条件渲染，当条件不满足时，那么标签结构就不渲染，而v-show指令，是通过 display:none; 将结构标签隐藏，标签还是会渲染的。
如何用呢
用户权限控制：在一个用户管理系统中，根据用户的角色权限显示或隐藏特定的功能模块。
流程：
定义用户角色和权限：在系统中定义不同的用户角色和相应的权限。例如，管理员角色可能拥有更高级的权限，而普通用户角色可能只能访问基本功能。
获取当前用户信息：在登录或验证用户时，获取当前用户的角色信息，并将其保存在系统中。
设计功能模块界面：根据角色权限设计相应的功能模块界面，并使用 v-if 和 v-show 来控制它们的显示与隐藏。
角色权限验证：在需要验证权限的地方，根据当前用户角色来判断是否具有访问权限。
<template>
<div>
<h1>用户管理系统</h1>
<div v-if="userRole === 'admin'">
<!-- 管理员特有功能模块 -->
<h2>管理员功能</h2>
<button @click="addUser">添加用户</button>
<button @click="deleteUser">删除用户</button>
</div>
<div v-else-if="userRole === 'user'">
<!-- 普通用户功能模块 -->
<h2>普通用户功能</h2>
<button @click="viewProfile">查看个人资料</button>
</div>
<div v-else>
<!-- 其他角色功能模块 -->
<h2>其他用户功能</h2>
<p>您没有访问权限</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userRole: 'admin' // 当前用户角色，可根据实际情况进行修改或从后端获取
};
},
methods: {
addUser() {
console.log('执行添加用户操作');
},
deleteUser() {
console.log('执行删除用户操作');
},
viewProfile() {
console.log('执行查看个人资料操作');
}
}
};
</script>
假设当前用户角色为管理员。根据用户角色的不同，显示不同的功能模块。
如果用户角色为管理员 (admin)，则会显示管理员特有的功能模块，并且可以执行添加用户和删除用户的操作。
如果用户角色为普通用户 (user)，则会显示普通用户功能模块，并且可以执行查看个人资料的操作。
如果用户角色不是管理员也不是普通用户，将显示其他用户功能模块，并给出权限提示。
根据实际情况，你可以根据不同的用户角色和权限需求来设计相应的功能模块，并在模板中使用 v-if、v-else-if 和 v-else 来根据用户角色的不同进行条件判断和显示相应的功能模块。
表单验证提示：在一个表单中，根据不同的验证条件显示或隐藏相应的错误提示信息。
使用 v-model 指令双向绑定表单元素的值，将输入的用户名和密码保存在 Vue 实例的 username 和 password 数据属性中。
在输入框的 blur 事件上绑定验证方法（validateUsername 和 validatePassword），分别对用户名和密码进行验证。
在每个错误提示信息的
<p>元素中使用了v-if条件判断，根据不同的验证条件来显示或隐藏相应的错误提示。当用户输入的用户名或密码不符合验证条件时，将对应的 showUsernameError 或 showPasswordError 设置为 true，错误提示信息将显示出来。提交按钮绑定了 submitForm 方法，用于处理表单提交逻辑。在该方法内，根据 showUsernameError 和 showPasswordError 的值来判断表单是否通过验证。
最后，在样式部分定义了一个 error 类，用于给错误提示文字添加红色的样式
<template>
<div>
<label for="username">用户名：</label>
<input type="text" id="username" v-model="username" @blur="validateUsername">
<p v-if="showUsernameError" class="error">请输入有效的用户名</p>
<label for="password">密码：</label>
<input type="password" id="password" v-model="password" @blur="validatePassword">
<p v-if="showPasswordError" class="error">密码长度必须大于等于8位</p>
<button @click="submitForm">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
showUsernameError: false,
showPasswordError: false
};
},
methods: {
validateUsername() {
this.showUsernameError = !(this.username.length >= 5 && this.username.length <= 20);
},
validatePassword() {
this.showPasswordError = !(this.password.length >= 8);
},
submitForm() {
if (!this.showUsernameError && !this.showPasswordError) {
// 表单验证通过，处理提交逻辑
console.log('表单提交成功');
} else {
console.log('表单验证失败');
}
}
}
};
</script>
<style>
.error {
color: red;
}
</style>
复杂列表筛选：在一个包含多个筛选条件的数据列表中，根据不同条件的选择展示或隐藏相应的数据项。
我们创建了一个复杂的列表筛选功能。
在模板中，我们设置了多个筛选条件，比如根据状态和类型来进行筛选。用户可以通过下拉选择框来选择相应的筛选条件。
在数据部分，我们定义了 selectedStatus 和 selectedType 两个变量来保存用户选择的状态和类型筛选条件。
在计算属性 filteredData 中，我们使用 filter 方法对原始数据进行筛选。根据用户选择的筛选条件，我们在 filter 回调函数中编写匹配逻辑，判断数据项是否符合筛选条件。
最后，在界面上使用 v-for 指令遍历 filteredData 数组，将符合筛选条件的数据项展示为列表。
<template>
<div>
<h1>复杂列表筛选</h1>
<div class="filters">
<!-- 条件一：根据状态筛选 -->
<label for="status">状态：</label>
<select id="status" v-model="selectedStatus">
<option value="">全部</option>
<option value="active">进行中</option>
<option value="completed">已完成</option>
</select>
<!-- 条件二：根据类型筛选 -->
<label for="type">类型：</label>
<select id="type" v-model="selectedType">
<option value="">全部</option>
<option value="personal">个人</option>
<option value="work">工作</option>
</select>
<!-- 其他筛选条件可类似添加 -->
<button @click="filterData">筛选</button>
</div>
<ul class="data-list">
<li v-for="item in filteredData" :key="item.id">{
{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
selectedStatus: '', // 选择的状态筛选条件
selectedType: '', // 选择的类型筛选条件
// 其他筛选条件的数据属性
data: [ // 原始数据列表
{
id: 1, name: '任务1', status: 'active', type: 'personal' },
{
id: 2, name: '任务2', status: 'completed', type: 'work' },
// 其他数据项
]
};
},
computed: {
filteredData() {
return this.data.filter(item => {
let matchStatus = true;
let matchType = true;
// 其他筛选条件的匹配逻辑
if (this.selectedStatus) {
matchStatus = item.status === this.selectedStatus;
}
if (this.selectedType) {
matchType = item.type === this.selectedType;
}
// 其他筛选条件的匹配逻辑
return matchStatus && matchType; // 其他筛选条件的匹配逻辑
});
}
},
methods: {
filterData() {
// 执行筛选逻辑
}
}
};
</script>
<style>
.filters {
margin-bottom: 10px;
}
.data-list {
list-style-type: none;
padding: 0;
}
</style>
动态步骤流程：在一个多步骤的流程中，根据当前的步骤显示或隐藏相应的步骤内容。
我们创建了一个动态步骤流程。
在模板中，我们使用一个循环 v-for 来渲染步骤导航栏，并根据 currentStep 的值来判断当前步骤是否处于激活状态。点击步骤导航栏时，通过 setCurrentStep 方法来设置当前步骤索引。
在步骤内容部分，我们同样使用循环 v-for 来渲染每个步骤的内容。使用 v-show 指令来根据 currentStep 的值来决定当前显示的步骤内容。
在数据部分，我们定义了 currentStep 变量来保存当前步骤的索引，以及 steps 数组来保存每个步骤的名称和描述信息。
在方法部分，我们实现了 setCurrentStep 方法，用于设置当前步骤的索引。
<template>
<div>
<h1>动态步骤流程</h1>
<div class="steps">
<div
v-for="(step, index) in steps"
:key="index"
:class="{ active: currentStep === index }"
@click="setCurrentStep(index)"
>
{
{ step.name }}
</div>
</div>
<div class="step-content">
<div v-for="(step, index) in steps" :key="index" v-show="currentStep === index">
<h2>{
{ step.name }}</h2>
<p>{
{ step.description }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentStep: 0, // 当前步骤索引
steps: [
{
name: '第一步', description: '完成第一步操作' },
{
name: '第二步', description: '完成第二步操作' },
{
name: '第三步', description: '完成第三步操作' }
// 其他步骤
]
};
},
methods: {
setCurrentStep(index) {
this.currentStep = index;
}
}
};
</script>
<style>
.steps {
display: flex;
}
.steps > div {
padding: 10px;
background-color: #ccc;
cursor: pointer;
}
.steps > div.active {
background-color: #f00;
}
.step-content > div {
display: none;
}
.step-content > div.show {
display: block;
}
</style>
谢谢款待
