① vue2中的過濾器
vue的過濾器只用用在 雙花括弧{{}} 和 v-bind 中，使用時採用|符號來實現
在main.js中全局定義過濾器方法，即可在項目中直接使用
直接在文件中使用filters，在其中定義要使用的過濾器
多個過濾器可串聯使用，前一個過濾的返回值作為後一個過濾器的入參
過濾器像函數一樣，可以接受參數
② 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
}
}
}
})
③ vue2.0中 v-html中輸出rawhtml時候 怎麼加過濾函數
不能用的似乎，會說沒有找到這個函數。要輸出rawhtml並且使用過濾器，就把emojiFormat寫在methods里，版不要寫在filters裡面。權使用的時候v-html="emojiFormat(comment.comment_content)"。
④ vue中的過濾器，Filter在實戰中的使用
先src文件夾下建立一個filter文件夾，然後在filter文件夾下建立一個moneyFilter.js文件
toFixed()方法。
3.編寫vue里的filter屬性
這里需要注意的是你fitler的名字可以隨便起，但是你用的toMoney方法，要和你上邊引入的一樣。
⑤ vue.js 過濾器怎麼做字數限制
過濾器里寫邏輯去限制就行了。
⑥ 如何使用vuejs過濾器
在這個教程中，我們將會通過幾個例子，了解和學習VueJs的過濾器。我們參考了一些比較完善的過濾器，比如orderBy 和 filterBy。而且我們可以鏈式調用過濾器，一個接一個過濾。因此，我們可以定義我們自己的過濾器在我們的Vue實例中。
閱讀這個教程的前提是你對Vue已經有了基本的語法基礎。
VueJs中的過濾器基礎
過濾器是一個通過輸入數據，能