05-Vue过滤器

最新推荐文章于 2024-05-21 15:02:50 发布

无味无感

最新推荐文章于 2024-05-21 15:02:50 发布

阅读量84

点赞数

分类专栏： VueJs

本文链接：https://blog.csdn.net/qq_41863998/article/details/118654216

版权

VueJs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文演示了如何在Vue.js应用中使用过滤器来格式化价格，将价格转换为带有美元符号的格式。示例代码展示了一个包含书籍信息的表格，其中价格字段通过`showPrice`过滤器进行处理，使得价格在页面上以美元形式展示。

摘要由CSDN通过智能技术生成

Vue过滤器

方便面重复使用，简化html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>出版名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in books">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.data}}</td>
        <td>{{item.price|showPrice}}</td>
      </tr>
    </tbody>
  </table>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script>
  const app = new Vue ({
    el: '#app',
    data: {
     books:[
       {id:1,name:'《算法争论》',data:'2006-9',price:85.00,count:1},
       {id:1,name:'《unix编程艺术》',data:'2003-1',price:95.00,count:1},
       {id:1,name:'《算法争论》',data:'2006-9',price:102.00,count:1},
       {id:1,name:'《代码大全》',data:'2005-5',price:65.00,count:1}
     ],
    },
    filters:{
      showPrice(price){
        return '$' + price.toFixed(2)
      }
    }
  })
</script>
</body>
</html>