vue好用的指令

最新推荐文章于 2024-05-19 20:18:26 发布

soputasmile11

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量74

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/u014473112/article/details/120883307

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue使用过一段时间，好些指令没怎么使用过，阅读文档发现有些挺好用，在此记录下来

1、过滤器

详细说明参考官方文档
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <th>书名</th>
      <th>原价</th>
      <th>折扣</th>
      <th>最终价格</th>
    </tr>
    <tr v-for="item in arr">
      <td>{{item.name}}</td>
      <td>{{item.price.toFixed(2)}}</td>
      <td>{{item.discount|toPercent}}</td>
      <td>{{item.price|compute(item.discount)}}</td>

    </tr>
  </table>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      arr: [{name:'老人与海',price: 120, discount: 0.8},{name:'人生海海', price: 150, discount:0.6}]
    },
    filters: {
      compute(price, discount){
          return (price*discount).toFixed(2)
      },
      toPercent(discount){
        return discount*100 + '%'
      }
     }
  })

</script>
</body>
</html>

这个过滤器还是很好用的，主要要记住的就是参数的使用，把管道符之前的数据作为第一个参数传递

持续记录中。。。

soputasmile11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue好用的指令

vue使用过一段时间，好些指令没怎么使用过，阅读文档发现有些挺好用，在此记录下来1、过滤器详细说明参考官方文档Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示使用示例：<!DOCTYPE html><html lang="en"><head> <meta char
复制链接

扫一扫