vue2的小练习——实现自定义指令v-nodata的商品列表

实现：一个商品列表，每个商品包含商品名称、商品价格，我们可以对每个商品进行删除操作，要求如下。

1. 实现一个自定义指令v-nodata，指令的功能是当商品列表中没有商品数据时会显示一个div，div中有“暂无数据”四个字，当商品列表中有数据时就不展示。
2. 定义一个过滤器，对商品的金额进行过滤，实现以千分质形式展示并保留2位小数。
3. 实现一个混入，将所有的数据、方法和过滤器都定义在里面
4. 有一个“还原”按钮，点击按钮后商品中的数据将还原。

效果如下图所示

 

 

 接下来是代码，看代码标题就知道放在哪里了

// main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: (h) => h(App),
}).$mount('#app');

快尝试一下吧。记得点赞！