Vue-条件渲染和列表渲染
Vue-条件渲染和列表渲染
条件渲染
v-if
v-if="表达式/数据"
使用v-if属性来选择是否渲染该元素到Dom树中
当数据为true,则该元素被渲染到Dom树中
v-else
使用v-else对与之对应的v-if取反
v-show
使用v-show实现与v-if相同的效果
与v-if不同的是,即使v-show的值为false,也仍然将该元素渲染到Dom树中
通过css样式:style="display: none" 来实现不显示在页面上,但该元素仍然被渲染
总的来说:v-if有更高的切换开销,v-show有更高的初始渲染开销
列表渲染
使用v-for遍历对象/数组,使其内容绑定列表项
v-for="(item, index) in items" :key="item.id"
其中,index为遍历时索引,item为遍历项
将v-for放到li/td上,将遍历数组/对象,在li/td中使用插值表达式访问内容
在vue中,需要告知其属性key,这个属性并不会被渲染,但在编辑器中不写会报红
<script setup>
import { reactive, ref } from "vue";
let pro = ref("产品");
let items = reactive([
{
id: "item1",
message: "薯片",
},
{
id: "item2",
message: "可乐",
},
{
id: "item3",
message: "炸鸡",
},
]);
</script>
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="item.id">
{{ pro }}{{ index + 1 }}{{ item.message }}
</li>
</ul>
</div>
</template>
<style scoped>
</style>
购物车练习
<script setup>
import { reactive } from "vue";
let carts = reactive([
{
name: "可乐",
price: 3,
number: 10,
},
{
name: "薯片",
price: 6,
number: 12,
},
{
name: "炸鸡",
price: 12,
number: 2,
},
]);
//购物车总金额功能
function compute() {
let total = 0;
for (let index in carts) {
total = total + carts[index].price * carts[index].number;
}
return total;
}
//购物车删除功能
function removeCart(index) {
carts.splice(index, 1);
}
//购物车一键清空功能
function clearCart(){
//调用API清除
carts.splice(0,carts.length)
}
</script>
<template>
<div>
<h1>您的购物车如下</h1>
<table border="1px">
<thead>
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<!-- 当购物车中有购物项时,展示这个tbody-->
<tbody v-if="carts.length > 0">
<tr v-for="(cart, index) in carts" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ cart.name }}</td>
<td>{{ cart.price }}</td>
<td>{{ cart.number }}</td>
<td>{{ cart.number * cart.price }}</td>
<td>
<button @click="removeCart()">删除</button>
</td>
</tr>
</tbody>
<!-- 当购物车中没有购物项时,展示这个tbody-->
<tbody v-else>
<td colspan="6">购物车空啦</td>
</tbody>
</table>
<button @click="clearCart()">一键清空购物车</button>
购物车总金额:{{ compute() }}元
</div>
</template>
<style scoped>
</style>