<p class="li-price" slot="price">{{list.price}}</p>
</delete-slider>
</div>
</template>
<script>
import deleteSlider from '@/components/deleteTemplate.vue'
export default {
components: {
deleteSlider
},
data () {
return {
dataList: [
{
id: 1,
img: 'static/a1.jpg',
title: '法国专柜2019夏季新款修身显瘦气质包臀短裙镂空蕾丝性感连衣裙子',
price: '399.00'
},
{
id: 2,
img: 'static/a2.jpg',
title: 'VERAMOON 亮片印花短袖连衣裙女夏甜美露背性感泡泡袖修身短裙',
price: '689.00'
},
{
id: 3,
img: 'static/a3.jpg',
title: 'famous 仙气木耳边紫色小碎花短裙a字雪纺连衣裙女',
price: '199.00'
},
{
id: 4,
img: 'static/a4.jpg',
title: '灰灰定制 2019春夏新款小香风粗花呢连衣裙女法式名媛复古短裙M家',
price: '298.00'
}
] }
},
methods:{
deleteLine (index, id){
console.log(id);
this.dataList.splice(index, 1)
}
}
}
</script>
注意实际应用中数据源可用异步加载，在删除的时候或许要异步请求后端来真正完成删除操作。
总结
以上所述是小编给大家介绍的使用Vue实现移动端左滑删除效果附源码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
