<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="new_file.vue"></script> </head> <body> <div id="app"> <button @click="reset">还原</button> <div v-noData="{goodsList}"> <ul> <li><span>商品名称</span><span>价格</span><span>操作</span></li> <li v-for="(good,index) in goodsList" :key="index"> <span>{{good.name}}</span> <span>{{good.price|filterPrice }}</span> <span @click="delood(index)" style="color: red;cursor: pointer;">删除</span> </li> </ul> </div> </div> <script> const goodsMixin = { data(){ return{ goodsList:[ {name:'电饭煲',price:200.133232}, {name:'电视机',price:880.998392}, {name:'电冰箱',price:650.2034}, {name:'电脑',price:4032.9930}, {name:'电磁炉',price:210.4322} ] } }, methods: { delGood(index){ this.goodsList.splice(index,1) }, reset(){ this.goodsList = [ {name:'电饭煲',price:200.133232}, {name:'电视机',price:880.998392}, {name:'电冰箱',price:650.2034}, {name:'电脑',price:4032.9930}, {name:'电磁炉',price:210.4322} ] } }, filters:{ filterPrice(value){ let newValue = [] newValue = value.toLocaleString().split('.') newValue[0] = (newValue[0] + '').replace(/\d{1,3}(?=(\d{3})+$)/g,'$&') return newValue[0] + '.' + newValue[1]/slice(0,2); } } } new Vue({ el:'app', mixins:[goodsMixin], directives:{ nodata:{ inserted(el,binding){ const noData = document.createElement('div'); noData.classList = 'noData' noData.innerHTML = '暂无数据'; el.appendChild(noData) const{goodsList} = binding.value; noData.style.display = goodsList.length === 0 ?'blick' : 'none' }, updata(el,binding){ const{goodsList} = binding.value; el.querySelector('.noData').style.display = goodsList.length === 0 ?'blick' : 'none'; } } }, data(){ return{} } }) </script> <style> #app ul li{ list-style: none; width: 400px; display: flex; justify-content: space-between; } .noData{ width: 400px; text-align: center; margin-left: 40px; } </style> </body> </html>纠错
时间: 2024-04-27 19:22:17 浏览: 86
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
这是一个包含Vue.js的前端代码,其中使用了Vue的指令和混入(mixin)。但是代码中存在一些错误:
1. 在HTML中的`<div id="app">`中缺少大于号。
2. 在`methods`中的删除方法名应该为`delGood`而非`delood`。
3. 在`filters`中的`filterPrice`方法中,应该是`newValue[1].slice(0,2)`而非`newValue[1]/slice(0,2)`。
另外,如果使用`v-noData`指令时,需要传入一个对象,对象中包含一个`goodsList`的数组属性。
最后,代码中使用了`toLocaleString()`方法将数字转为千位分隔符格式,但这种方式在不同的浏览器和语言环境下会有不同的表现。如果需要保证格式的一致性,建议使用第三方库,如`Numeral.js`或`Accounting.js`。
阅读全文