內容中的{{var}}會直接顯示，使用過濾器：{{var | 過濾器名}}，會先用過濾器處理var，再顯示，
按作用域劃分，有2種過濾器：全域過濾器、組件內過濾器，
demo 組件內過濾器
<div id="app"> <input v-model="content" /><br /> <!--系結input的value到變數content--> <p>原來的字串：{{content}}</p> <!--不使用過濾器--> <p>字串反轉：{{content | reversal}}</p> <!--使用過濾器reversal，先反序、再顯示--> </div> <script> new Vue({ el:'#app', data:function(){ return { content:'' //最初變數沒有值，split()會報錯，給它賦一個初始值 } }, filters:{ // 定義一個組件內過濾器 reversal(val){ //過濾器名(引數表)，會自動把|前面的變數作為實參傳入 return val.split('').reverse().join(''); //先切分為字符陣列、陣列反序、陣列連接為一個字串 } //可定義多個過濾器，逗號分隔即可 } }); </script>
demo 全域過濾器
<div id="app"> <input v-model="content" /><br /> <p>原來的字串：{{content}}</p> <p>字串反轉：{{content | reversal}}</p> </div> <script> //定義一個全域過濾器，所有組件均可使用此過濾器， //過濾器名、指向的函式，全域過濾器的過濾器名要引起來作為字串，不然會被認為是變數，會報錯過濾器未定義 Vue.filter('reversal',function(val){ return val.split('').reverse().join(''); //內容反序 }); new Vue({ el:'#app', data:function(){ return { content:'' //最初變數沒有值，split()會報錯，給它賦一個初始值 } }, }); </script>
Vue中的this
<div id="app"> <input v-model="content" /><br /> </div> <script> new Vue({ el:'#app', data:function(){ return { content:'ok' //最初變數沒有值，split()會報錯，給它賦一個初始值 } }, created:function(){ console.log(this); //this表示當前Vue物件，包含了當前Vue物件的各種資訊 }, }); </script>
函式可以寫成 識別符號:function(引數表){ }，識別符號指向匿名函式，也可以直接寫成 識別符號(引數表){ }
比如上面的代碼可以寫為：
<div id="app"> <input v-model="content" /><br /> </div> <script> new Vue({ el:'#app', data(){ //另一種寫法 return { content:'ok' } }, created(){ // console.log(this); }, }); </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137744.html
標籤：JavaScript
上一篇：Vue 常用指令