㈠ vue中的過濾器，Filter在實戰中的使用
先src文件夾下建立一個filter文件夾，然後在filter文件夾下建立一個moneyFilter.js文件
toFixed()方法。
3.編寫vue里的filter屬性
這里需要注意的是你fitler的名字可以隨便起，但是你用的toMoney方法，要和你上邊引入的一樣。
㈡ （Vue -03）Vue綁定樣式 + 計算屬性 + 偵聽器+ 過濾器
Vue官方文檔
首頁-學習下拉欄-文檔-教程 =>火速一鍵進入學習
(1) 綁定一個對象，對象的屬性名是類選擇器名稱，屬性值返回 true ，表示添加該選擇器
綁定的對象的，屬性名 bgColor 是 css 里的 類選擇器的名字 ，
屬性值 bgColor 是 數據里設置的屬性名 ┗|｀O′|┛ 嗷~~
初始化設定了是 false ，然後點擊的時候呢給它變成 true ，添加成功啦
(2) 綁定一個三元表達式
三元表達式語法結構： 條件表達式 ？ 表達式1 ： 表達式2
如果條件表達式結果為 true ，則返回 表達式1 ；如果為 false ，則返回 表達式2 的值。
綁定的三元表達式條件為true時，添加選擇器；條件為false則不添加。
:style 綁定樣式時，對象的屬性名稱是原生CSS的屬性名嚴格名稱（要使用小駝峰命名法），屬性值是具體的樣式值，要採用小駝峰命名規范。
Vue官方的-計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變數 message 的翻轉字元串。當你想要在模板中的多處包含此翻轉字元串時，就會更加難以處理。
所以，對於任何復雜邏輯，你都應當使用 計算屬性 。
好耶~讓我們開始吧┗|｀O′|┛ 嗷~~
此時頁面效果為：
姓名欄 中的 value 值會隨著 姓欄 和 名欄 的輸入而改變，但是需要在 姓名欄 中拼接。
有兩種辦法可以解決：
通過這個方法返回 this.firstName+ '.'+ this.lastName ，然後再去調用這個方法。如下：
結果是由兩個屬性拼接而來，說明 結果是由這兩個屬性計算而來。
在data同級，加一個 computed 選項，用於定義計算屬性，裡面定義的是方法；計算屬性本質上是方法，在模板中當成屬性去使用。如下：
此時把 :value 改成 v-model ，並不能實現雙向綁定，且會報錯。
注意： 計算屬性默認情況下只能讀，不能改。
如果想要讓計算屬性既能讀，又能改，那就要換一種形式啦~
① 在 computed 里定義完整結構的計算屬性，然後使用v-model進行綁定計算屬性。
② get方法，用於返回計算屬性的值。
③ set方法，用於修改計算屬性的值，記得傳值。
如下：
計算屬性的優勢是： 有緩存 。 當頁面數據發生變化時，所有的方法都要重新執行。當計算屬性用到的數據發生變化時，計算屬性才會執行。
比如計算商品總價時，最好是用計算屬性，它有緩存嘛
根據屬性的名稱，定義一個方法，用於偵聽該屬性的變化。
當屬性的值發生變化時，該方法就會執行。
這個方法，有兩個參數，第一個參數是最新值，第二參數是舊值。
如果要實現深度偵聽對象的變化（也就是對象具體屬性的變化），就需要使用完整的寫法，定義一個對象。
deep 屬性開啟深度監視，值為 true 或 false
immediate 屬性設定頁面載入完成時，先運行一次，值為 true 或 false
（注意：這種情況下，舊值是 undefined ）
handler 定義監視的函數
注意：開啟深度監視後，舊值已經沒有意義，因為對象是引用類型，對象的屬性值已經改了，就沒有舊的屬性值。
當前計算屬性裡面用到數據發生變化時，會重新執行計算屬性，
只是計算屬性必須要在模板中使用（方法要在頁面中用一下）
Vue官方的-過濾器
過濾器可以用在兩個地方：雙花括弧插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部， 由「管道」符號 | 指示。
局部過濾器（Vue實例內部定義的過濾器），只有當前Vue實例可以訪問。
在 filters 中定義過濾器。
通過 管道符 | 調用過濾器，其實就是調用那個方法，將值傳進去，再返回新的值。
過濾器可以 鏈式調用 ，就是之前已經過濾完成的結果，繼續傳給下一個過濾器，注意順序。
在創建 Vue 實例之前定義的全局過濾器，所有的Vue實例都可以訪問。
如果局部過濾器和全局過濾器沖突，優先順序更高的是局部過濾器。
一般將全局過濾器，會單獨創建一個filter文件夾存放┗|｀O′|┛ 嗷~~，
記得在html文件里引入。
㈢ vue 裡面怎麼調用過濾器方法
在user-list組件中我們需要遍歷聯系人列表，filter_key用來傳給該組件，和搜索欄組件一樣，也用props接收一下，並且在裡面插入要過濾的內容，
filterBy是返回過濾後的數組，orderBy是排序，前者的使用方法是filterBy 一個key(欄位)，in xxx 就是指搜索欄位，這里需要注意的是in後面跟的必須是obj裡面的key，因為我們的需求是同時保證輸入漢字或者拼音都能查詢，所以in後面跟的是okr_owner和user.u_name(這是vue渲染的數據，我們展示該聯系人用的是裡面的u_name，okr_owner則為拼音)，下面附上數據結構。對於在搜索時如何去掉這些字母索引，我們只需要在通訊錄頁面中的<user-list>加入一個欄位，然後使用watch來監聽一下key_word即可。
㈣ 如何使用vuejs過濾器
在這個教程中，我們將會通過幾個例子，了解和學習VueJs的過濾器。我們參考了一些比較完善的過濾器，比如orderBy 和 filterBy。而且我們可以鏈式調用過濾器，一個接一個過濾。因此，我們可以定義我們自己的過濾器在我們的Vue實例中。
閱讀這個教程的前提是你對Vue已經有了基本的語法基礎。
VueJs中的過濾器基礎
過濾器是一個通過輸入數據，能
㈤ vue過濾器filters的使用
當你在v-for循環渲染一個數組對象的時候，是否遇到過這樣的問題：對象裡面的欄位並不是直接渲染在頁面中，而是需要把數據處理過後的內容顯示在頁面上。
3、過濾器操作完成，頁面結果分析如下：
㈥ Vue的組件,過濾器，自定義指令以及v-if
<div class="app">
<h1 v-show="false">我愛你</h1>
v-if是直接將dom刪除了，在dom文檔中已經找不到對應的dom，變成了注釋
<h1 v-if="false">我愛你</h1>
如果頻繁使用 就使用v-show 可以節約性能開銷
如果短暫使用，例如頁面一開始載入的時候進行判斷顯示 優先使用v-if
實際開發中，使用v-if比較多
<li v-for="(item,index) in arr">{{item}}</li>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
msg: 123,
list: [1, 2, 3]
},
computed: {
arr: function () {
return this.list.filter(r => r > 1)
}
},
methods: {
}
})
</script>
<div class="app">
<child1></child1>
<div><child-a/></div>
<div><child-b/></div>
<template id="childB">
<div>
<h1>我是程序員</h1>
<h1>我是程序員</h1>
</div>
</template>
</div>
<script src="./node_moles/vue/dist/vue.min.js"></script>
<script>
Vue.component('child1',{
template:`<h1>我是child1</h1>`
})
Vue.component('childA',{
template:`<h1>我是childA</h1>`
})
Vue.component('childB',{
template:'#childB'
})
new Vue({
el:'.app'
})
</script>
<div class="app" v-cloak>
<h1>{{'我愛張sir'|str('金牌廚師')}}</h1>
<h1>{{'hello'|he}}</h1>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
Vue.filter('fn',function(v,s){
console.log(v);
return v/* .substring(0,v.indexOf(':')) */+s
})
new Vue({
el:'.app',
/* 局部過濾器 */
filters:{
str(v,s){
return v+s
},
he(v){
return v.split('').reverse().join('')
}
}
})
當頁面刷新的時候data中的數據還沒有渲染出來，頁面中就會顯示原本寫的插值語法，這時候就需要消除這個bug
在綁定的實例化對象的元素上上添加v-cloak 並在style樣式中添加（只要前面加上v-都可以實現，隨意命名，通常使用clock）
display: none;
}
<div class="app">
<input type="text" v-bg>
<input type="text" v-focus="{background:'yellow'}">
<div style="width: 100px;height: 100px;" v-bg></div>
<p v-sty="{background:'pink',color:'yellow'}">我是程序員</p>
</div>
<script src="./node_moles/vue/dist/vue.js"></script>
<script>
Vue.directive('bg', function (el) {
/* 回調的第一個參數就是元素本身 */
console.log(el);
el.style.background = 'red'
})
/* 全局自定義指令 寫全方式 */
Vue.directive('focus', {
/* 當綁定元素插入到DOM中 */
inserted: function (el, bind) {
el.focus();
console.log(bind);
el.style.background = bind.value.background
}
})
new Vue({
el: '.app',
/* 局部的自定義指令 要加s */
directives: {
sty: {
inserted (el, bind) {
el.style.background = bind.value.background;
el.style.color = bind.value.color
}
}
}
})
㈦ vue.js filter怎麼使用
Vue.filter('過濾器名',function(value){
returnvalue*.5;
});輸出變數的時候直接在後面加上：|過濾器名
就可以了。
㈧ 關於vue中的過濾器使用--結合element-ui的table項
參考文檔： https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1
https://blog.csdn.net/qq_41649755/article/details/106331555?utm_medium=distribute.pc_relevant.none-task-blog--1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog--1.channel_param
項目需求：
從介面中獲取數據，渲染顯示在表格中，且數據精度保留兩位小數。
在element-ui中表格的顯示中，插槽的具體使用。
table按照tableData這個數組的長度來生成多少行，按照有多少個el-table-column來生成多少列。
<template slot-scope="scope">
在<el-table-column>中使用自定義模板，實現對渲染數據的改變。
template中自定義列模板，自定義列的顯示內容，可組合其他組件使用。
利用scope.row獲取該行中dataYoyYear所對應的列值數據，進而進行修改。
拿到數據之後，就要結合vue的過濾器對數據進行修改精度。
mention！此時的filters方法，而不是filter。important：該方法與methods並列，否則報錯！