vue实现简单购物列表

最新推荐文章于 2024-06-21 10:54:49 发布

方寸而已

最新推荐文章于 2024-06-21 10:54:49 发布

阅读量638

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lch01122/article/details/127248140

版权

本文介绍了如何利用Vue.js框架来实现一个基本的购物列表功能。通过实例代码讲解了Vue.js的数据绑定、组件化和事件处理等核心特性，帮助开发者快速掌握在前端应用中构建动态列表的方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr>
					<th><input type="checkbox" v-model='all' @change='checkAll'>全选</th>
					<th>商品名称</th>
					<th>价格</th>
					<th>数量</th>
				</tr>
				<tr v-for="(obj,index) in list" :key='obj.name'>
					<td><input type="checkbox" v-model='obj.status'></td>
					<td>{
  {obj.name}}</td>
					<td>{
  {obj.price}}</td>
					<td>
						<button @click='obj.number--'