[Vue]过滤器Filters(八)

filters

格式化变量输出内容(日期格式化、大小写转换、数字再计算)
类似Linux |

ls | grep 'dev*' #显示dev开头的文件

代码源文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <title>hellovue</title>
</head>
<body>
<div id="myApp">
  <p>{{message}}</p>
  <!--
  {{message|toupper}}
  可以理解为Linux管道
  ls | grep 'dev*'
  -->
  <p>{{message|toupper}}</p>
  <hr>
  <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})</p>
</div>
<script>
  var myApp = new Vue({
    /*绑定标签的id*/
    el: '#myApp',
    /*标签上绑定的数据*/
    data: {
      message: 'hello vue.js world',
      num: 0.3
    },
    filters: {
      /*全部转换为大写*/
      toupper: function (value) {
        return value.toUpperCase()
      },
      /*转换百分比*/
      topercentage: function (value) {
        return value * 100 + '%'
      },
    },
  })
</script>
</body>
</html>

[Vue]过滤器Filters(八)

filters

代码源文件

END