本文最后更新于40 天前，其中的信息可能已经过时，如有错误请发送邮件到liumiao0429@foxmail.com
计数器的实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简易计数器</title>
<script src="js/"></script>
</head>
<body>
<div id="app">
<h3>简易计数器</h3>
<button @click="decrease">-</button>
<div>{{ count }}</div>
<button @click="increase">+</button>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increase() {
this.count++;
},
decrease() {
this.count--;
}
}
})
</script>
</body>
</html>for渲染用户列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>用户数据列表</h3>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data: {
users: [
{ id: 1, name: '张三', email: 'zhangsan@example.com', status: '活跃' },
{ id: 2, name: '李四', email: 'lisi@example.com', status: '非活跃' },
{ id: 3, name: '王五', email: 'wangwu@example.com', status: '活跃' },
{ id: 4, name: '赵六', email: 'zhaoliu@example.com', status: '活跃' },
{ id: 5, name: '钱七', email: 'qianqi@example.com', status: '非活跃' },
{ id: 6, name: '孙八', email: 'sunba@example.com', status: '活跃' },
{ id: 7, name: '周九', email: 'zhoujiu@example.com', status: '非活跃' },
{ id: 8, name: '吴十', email: 'wushi@example.com', status: '活跃' },
{ id: 9, name: '郑十一', email: 'zhengshiyi@example.com', status: '非活跃' },
{ id: 10, name: '冯十二', email: 'fengshier@example.com', status: '活跃' },
]
},
})
</script>判断筛选
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表筛选</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>商品列表筛选</h3>
<div class="filter-buttons">
<button @click="currentFilter = 'all'">
全部
</button>
<button @click="currentFilter = '0-100'">
¥0-¥100
</button>
<button @click="currentFilter = '100-200'">
¥100-¥200
</button>
<button @click="currentFilter = '200+'">
¥200以上
</button>
</div>
<div>
<div v-for="product in filteredProducts" :key="product.id">
<h4>{{ product.name }}</h4>
<p>¥{{ product.price }}</p>
<p>{{ product.description }}</p>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
currentFilter: 'all',
products: [
{ id: 1, name: '商品A', price: 50, description: '价格实惠的商品' },
{ id: 2, name: '商品B', price: 120, description: '中等价位的商品' },
{ id: 3, name: '商品C', price: 80, description: '性价比高的商品' },
{ id: 4, name: '商品D', price: 250, description: '高端品质的商品' },
{ id: 5, name: '商品E', price: 180, description: '优质商品' },
{ id: 6, name: '商品F', price: 30, description: '低价商品' }
]
},
computed: {
filteredProducts() {
if (this.currentFilter === 'all') {
return this.products;
} else if (this.currentFilter === '0-100') {
return this.products.filter(product => product.price >= 0 && product.price <= 100);
} else if (this.currentFilter === '100-200') {
return this.products.filter(product => product.price > 100 && product.price <= 200);
} else if (this.currentFilter === '200+') {
return this.products.filter(product => product.price > 200);
}
return this.products;
}
}
})
</script>
</body>
</html>
