mybatis實現對資料庫的增刪改查
阿新 • • 發佈：2022-05-17
vue過濾器
分類：
1、單個元件的過濾器，也叫區域性過濾器
2、vue例項全域性的過濾器，它可以被應用在任何地方
使用位置：
1、{{message | filterA}}雙括號插值內
2、<h1 v-bind:id="message | filterA">{{message}}</h1> v-bind繫結的值的地方
使用多個過濾器：（依次執行）
{{message | filterA | filterB}}這個例子中會把message的值當做引數傳入A過濾器進行過濾，A過濾器過濾完的資料返回值會傳入B過濾器
全域性過濾器：
vue.filter("過濾器名稱"，函式)；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app1"> 10 <h1>我是app1：{{message | upperCase}}</h1> 11 </div> 12 <div id="app2"> 13 <h1>我是app2：{{message | upperCase}}</h1> 14 </div> 15 </body> 16 17 <script> 18 //定義全域性過濾器 19 Vue.filter("upperCase",function(value) { 20 if (!value) return ""; 21 value = value.toString(); 22 //字元轉換成大寫 23 return value.toUpperCase(); 24 }) 25 let vm = new Vue({ 26 el: "#app1", 27 data: { 28 message: "HelloWorld" 29 } 30 }); 31 let vm2 = new Vue({ 32 el: "#app2", 33 data:{ 34 message: "hahahaha" 35 } 36 }); 37 </script> 38 </html>
區域性過濾器：
定義區域性的過濾器
定義格式：filters：{過濾器名稱：函式}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app3"> 10 <component-a :msg="message"></component-a> 11 </div> 12 </body> 13 <template id="my-temlate-1"> 14 <h3>我是子元件，使用了局部過濾器{{msg | capitalize}}</h3> 15 </template> 16 <script> 17 var componentA = { 18 props:["msg"], 19 template:`#my-temlate-1`, 20 filters:{ 21 capitalize:function (value) { 22 if (!value) return ""; 23 value = value.toString(); 24 value = value.charAt(0).toUpperCase()+value.substring(1); 25 return value; 26 } 27 } 28 } 29 let vm3 = new Vue({ 30 el: "#app3", 31 data:{ 32 message: "dddd" 33 }, 34 components: { 35 "component-a":componentA //註冊區域性元件 36 } 37 }); 38 </script> 39 </html>