【 条件渲染 】
# 1 v-if v-else-if v-else
条件渲染在Vue.js中通过v-if、v-else-if和v-else指令实现。以下是它们的注意事项：
-
v-if指令：
v-if指令用于根据条件判断是否渲染一个元素。- 如果条件为真（true），则该元素会被渲染到 DOM 中；如果条件为假（false），则该元素不会被渲染到 DOM 中。
- 例如：
<div v-if="isTrue">
这个元素会根据条件渲染
</div>
-
v-else-if指令：
v-else-if指令用于在v-if指令的条件为假时，根据额外的条件判断是否渲染一个元素。- 可以多次使用
v-else-if指令来添加多个条件判断。 - 例如：
<div v-if="condition1">
这个元素会根据条件1渲染
</div>
<div v-else-if="condition2">
这个元素会根据条件2渲染
</div>
-
v-else指令：
v-else指令用于在之前的条件都为假时渲染一个元素。v-else指令必须跟在v-if或者v-else-if指令之后，并且不能单独使用。- 例如：
<div v-if="condition1">
这个元素会根据条件1渲染
</div>
<div v-else>
这个元素会在条件1为假时渲染
</div>
注意事项：
- 唯一性： 在同一个元素上，
v-if、v-else-if和v-else指令是互斥的，只能同时出现其中之一。 - 性能考虑： 使用
v-if时，Vue.js会根据条件动态添加或移除元素，适用于需要频繁切换的情况；而使用v-show时，元素总是会被渲染到DOM中，只是通过CSS的display属性控制显示与隐藏，适用于频繁切换但元素结构不变的情况，且初始渲染时开销较小。 - key属性： 在使用
v-if时，如果条件切换导致元素被销毁再重新创建，为了确保Vue.js能够正确跟踪元素的身份，应当给每个元素添加一个唯一的key属性，以便Vue.js能够重用或重新定位元素，提高性能。
具体示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div class="app">
<h1>衣服价格</h1>
<h2>价格为：{{price}} 元</h2>
<h3 v-if="price>=1000">高端品牌</h3>
<h3 v-else-if="price>=500 && price
>= 1000">品牌</h3>
<h3 v-else-if="price>=200 && price
>= 500">中档品牌</h3>
<h3 v-else-if="price>=100 && price < 200">平价品牌</h3>
<h3 v-else>廉价品牌</h3>
</div>
<script>
var vm = new Vue({
el: ".app",
data() {
return {
price: 800 // 修改为衣服的价格，单位为元
}
}
})
</script>
</body>
</html>
【 列表渲染 】
列表渲染是通过v-for指令来实现的。v-for用于在模板中渲染一系列元素，可以循环遍历数组、对象或其他可迭代数据结构。以下是列表渲染的注意事项和使用方法：
使用方法
-
基本用法：
-
在一个元素上使用
v-for指令，可以遍历数组并为每个元素创建一个相同的模板。 -
语法：
v-for="(item, index) in items" :key="key"，其中：
item是循环中当前元素的变量名。index是循环中的索引。items是要遍历的数组或对象。:key是一个唯一标识元素的属性，通常使用元素的索引或唯一ID。
-
-
遍历对象：
- 可以遍历对象的属性并访问键和值。
- 语法：
v-for="(value, key, index) in object" :key="key"。
-
列表渲染中的
key属性：- 使用
v-for时，应为每个循环的元素设置key属性。 key属性应为唯一标识符，以确保Vue.js能够正确跟踪元素的身份，提高渲染性能。- 如果没有
key属性，可能导致列表中的元素不正确地被重新排序、删除或添加。
- 使用
-
注意事项：
- 避免在同一级别的多个元素中同时使用
v-for和v-if，可能导致渲染错误。可以考虑将条件逻辑放在v-for外面，或者在内部使用三元表达式。 - 当数组或对象数据更新时，Vue.js会智能地进行差异更新，但要确保数据结构保持相对稳定，以减少不必要的重渲染。
- 避免在
v-for循环内修改数组的长度，这可能会导致渲染问题。 - 当列表的内容发生变化时，如果列表中的元素结构复杂或涉及大量的嵌套结构，应谨慎使用，可能导致性能问题。
- 避免在同一级别的多个元素中同时使用
-
基本语法：
<div v-for="(item, index) in items" :key="index"> <!-- 使用item和index来访问每个项的数据 --> </div> -
item：当前被迭代的项的数据。
-
index：当前项在数组中的索引。
-
items：要被迭代的数组或对象。
-
:key：为了提高性能，Vue要求每个被迭代的元素都要有一个唯一的key属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(student,index) in students" :key="index" style="font-size: 60px;color: lightpink">
{{student.name}} ---{{student.age}}岁
</li>
</ul>
</div>
</body>
<script>
new Vue ({
el:"#app",
data:{
students:[
{ name:'魂斗罗',age:26},
{ name:'超级马里奥',age:29},
{ name:'合金弹头',age:21},
]
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>考试成绩表</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<style>
.container {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="table">
<div class="container">
<h1 class="text-center">考试成绩表</h1>
<table class="table table-bordered text-center">
<button class="btn btn-danger" @click="handleLoad">加载购物车</button>
<thead>
<tr>
<th>name</th>
<th>Chinese</th>
<th>math</th>
<th>English</th>
<th>science</th>
<th>Music</th>
</tr>
</thead>
<tbody>
</tbody>
<tr v-for="(item,index) in table_list" :class="index%2==0?'table-danger':'table-primary'">
<td>{{ item.name }}}</td>
<td>{{ item.Chinese }}</td>
<td>{{ item.math }}</td>
<td>{{ item.English }}</td>
<td>{{ item.science }}</td>
<td>{{ item.Music }}</td>
</tr>
</table>
</div>
</div>
</body>
<script>
new Vue({
el: '#table',
data: {
table_list: []
},
methods: {
handleLoad() {
this.table_list = [
{name: "小红", Chinese: 60, math: 65, English: 88, science: 66, Music: 96},
{name: "小明", Chinese: 75, math: 96, English: 96, science: 68, Music: 100},
{name: "小月", Chinese: 66, math: 95, English: 98, science: 76, Music: 98},
{name: "小栏", Chinese: 88, math: 85, English: 78, science: 86, Music: 92},
{name: "余额", Chinese: 96, math: 75, English: 82, science: 96, Music: 96},
]
}
}
})
</script>
</html>
v-for可以循环的变量
#1 以后写v-for，都要在标签上加 :key="key" ，key必须唯一
# 2 这样做可以提高虚拟dom的替换效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>循环对象</h1>
<p v-for="(value,key) in username"> {{ key }}:{{ value }}</p>
<h1>循环数组</h1>
<div>
<span v-for="(item,index) in music">{{item}}<span v-if="index!=music.length-1">|</span></span>
</div>
<h1>循环字符串</h1>
<p v-for="item in 'jingbai is bai'">{{item}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
num:10,
music:["兰亭序",'东方破','听妈妈的话','春晓'],
username:{name:'jing',age:19,height:199}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 循环示例</title>
<!-- Vue -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>数组和对象的循环示例</h2>
<!-- 用于展示数组循环结果的列表 -->
<h3>数组循环结果：</h3>
<ul id="array-list"></ul>
<!-- 用于展示对象循环结果的列表 -->
<h3>对象循环结果：</h3>
<ul id="object-list"></ul>
<script>
$(document).ready(function() {
// 示例数组
var arr = [ "apple", "orange", "banana" ];
// 使用 $.each 循环数组，并渲染到列表中
$.each(arr, function( index, value ) {
$('#array-list').append('<li>' + index + ': ' + value + '</li>');
});
// 示例对象
var obj = { foo: "bar", baz: "qux" };
// 使用 $.each 循环对象，并渲染到列表中
$.each(obj, function( key, value ) {
$('#object-list').append('<li>' + key + ': ' + value + '</li>');
});
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
