代码纠错<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <button @click="reset">还原</button> <div v-noData="{goodsList}"> <ul> <li><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 goodMixin={ date(){ return{ goodsList:[ {name:'电饭煲',price:200.1333232'}, {name:'电视机',price:2880.998395'}, {name:'电冰箱',price:650.2034'}, {name:'电脑',price:4032.9930'}, {name:'电磁炉',price:210.4322'}, ] } }, filters:{ filterPrice(value){ let newVualue =[] newVualue=value.toLocaleString().split('.') newVualue[0] = (newVualue[0]+'').replace(/\d{1,3}(?=(\d{3}+$)/g,'$&,') return newVualue[0] + '.' + newVualue[1].slice(0,2); } } new Vue({ el:'app', mixins:[goodsMixin], directives:{ inserted(el,binding){ const noData = document.createElement('dvi'); noDta.classList = 'noData' noData0innerHTML = '暂无数据'; el.appendChid(noData) const {goodsLIst} = binding.value; noData.style.display = goodsList.length ===0?'block':'none' }, update(le,binding){ const {goodsList} = binding.value; el.querSeletor('.noData').style.display = goodsList.lenght ===0? 'block':'none'; } } }, data(){ return{} } }) </script> <style> #app ul li{ list-style: none; display: flex; width: 400px; justify-content: space-between; } .noData{ width: 400px; text-align: center; margin-left: 40px; } </style> </body> </html>
时间: 2024-03-05 13:47:22 浏览: 133
代码中存在一些拼写错误和语法错误,请您修改如下:
1. 将 `const goodMixin={...}` 修改为 `const goodsMixin={...}`,拼写错误;
2. `date(){...}` 应该为 `data(){...}`,拼写错误;
3. `price:200.1333232'`、`price:2880.998395'`、`price:650.2034'`、`price:4032.9930'`、`price:210.4322'` 这几行的价格后面有多余的引号,应该去掉;
4. `el.appendChid(noData)` 应该为 `el.appendChild(noData)`,`appendChild` 拼写错误;
5. `noData0innerHTML` 应该为 `noData.innerHTML`,变量名拼写错误;
6. `el.querSeletor('.noData')` 应该为 `el.querySelector('.noData')`,方法名拼写错误;
7. `cursor:pointer` 应该为 `style="cursor:pointer"`,样式属性名称拼写错误。
修改后的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="reset">还原</button>
<div v-noData="{goodsList}">
<ul>
<li><span>商品名称</span></li>
<li v-for="(good,index) in goodsList" :key="index">
<span>{{good.name}}</span>
<span>{{good.price|filterPrice}}</span>
<span @click="delGood(index)" style="color: red; cursor:pointer">删除</span>
</li>
</ul>
</div>
</div>
<script>
const goodsMixin={
data(){
return{
goodsList:[
{name:'电饭煲',price:200.13},
{name:'电视机',price:2880.99},
{name:'电冰箱',price:650.20},
{name:'电脑',price:4032.99},
{name:'电磁炉',price:210.43},
]
}
},
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);
}
},
methods:{
delGood(index){
this.goodsList.splice(index,1);
},
reset(){
this.goodsList=[
{name:'电饭煲',price:200.13},
{name:'电视机',price:2880.99},
{name:'电冰箱',price:650.20},
{name:'电脑',price:4032.99},
{name:'电磁炉',price:210.43},
]
}
},
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?'block':'none';
},
update(el,binding){
const {goodsList} = binding.value;
el.querySelector('.noData').style.display = goodsList.length ===0? 'block':'none';
}
}
}
};
new Vue({
el:'#app',
mixins:[goodsMixin],
data(){
return{}
}
});
</script>
<style>
#app ul li{
list-style: none;
display: flex;
width: 400px;
justify-content: space-between;
}
.noData{
width: 400px;
text-align: center;
margin-left: 40px;
}
</style>
</body>
</html>
```
阅读全文