共计 1765 个字符，预计需要花费 5 分钟才能阅读完成。
一. 需要做出的效果图：
二. 实现的步骤
首先，先建一个项目，命名 Table，在 Table 项目中的 components 里新建一个 MyTable.vue 文件。
第二步，在原有的 HelloWorld.vue 中写入代码。
HelloWorld.vue代码如下：
{{msg}}
Edit
components/HelloWorld.vue to test HMR
Check out
create-vue, the official Vue + Vite starter
Install
Volar
in your IDE for a better DX
Click on the Vite and Vue logos to learn more
MyTable.vue代码如下：
在 App.vue 中写入代码：
商品管理
#
商品名称
价格
标签
操作
{{index + 1}}
{{row.goods_name}}
￥{{row.goods_price}}
{{item}}
最后，修改 main.js 的代码：
import {createApp} from 'vue'
import './bootstrap.css'
import App from './App.vue'
createApp(App).mount('#app')
三. 运行结果
按ctrl+ s 保存，运行其结果：
点击 +Tag 可以添加不同的标签，例如：
点击删除也可以删除该行，删除如上第一行，如下所示：
今天就分享到此，感谢预览~
原文地址: Vue.js 案例——商品管理
正文完
