① 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中的过滤器基础
过滤器是一个通过输入数据，能