4、Vue的filter過濾屬性

時間 2020-05-06

標籤 vue filter 過濾屬性简体版

原文原文鏈接

1:html頭文件的內容在<head>中引入了兩個js文件javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
   <script src="glFilter.js"></script>
</head>
<body>

2:這段代碼是<div>標籤內容而且有三個過濾函數html

<div id="app">
        {{money|price("$","2")}}       //結果是：$100.00
        {{msg|addTtext("world")}}      //結果是：HELLO world
        {{msg|upper()}}                //結果是：HELLO
</div>

3:這段代碼是放在<script>中的Vue代碼vue

<script>
    // Vue.filter("price",(data)=>data.toFixed(2));//全局過濾器能夠放在單獨的js文件中好比glFilter.js文件

var vm = new Vue({ el: "#app", data: { money: 100, msg:"hello" }
          //,//局部過濾器
          //  filters:{
          //      upper(data){
          //          return data.toUpperCase();
          //      }
          //  }
        });
    </script>

4：glFilter.js文件是單獨寫的Vue文件java

//轉換成2位小數的帶有$符號的數字既是$100.00
Vue.filter("price",function(data,val1,val2){
    return val1+data.toFixed(val2);
});
//小寫字母轉換成大寫字母
Vue.filter("addTtext",function(data,text){
    return data.toUpperCase()+" "+text;
});

5:html結束標記符號app

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。