VUE学习日记(六) ---- 过滤器 filters、计算属性 computed

过滤器可在原有值的基础上加一些判定、格式化变量内容

注意差别,过滤器是 |    计算属性是直接 {{ }} 使用

<div id="myPage">
      <p>原串:{{message}}</p>
      <p>加过滤器后:{{message|toupper}}</p>

      <p>原值:{{num}}</p>
      <p>经过计算属性后:{{topercentage}}%</p>
    </div>    

    <script>
      var myPage = new Vue({
        el:'#myPage',
        data:{
          message:"这个一个消息输出:",
          num:0.3
        },
        filters:{
          toupper:function(value)
          {
            return value+"Hello Word!";
          }          
        },
        computed:{
          topercentage:function()
          {
            return this.num*100;
          }
        }
      })
    </script>

效果展示:

原文地址:https://www.cnblogs.com/JoeYD/p/13552321.html