㈠ 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并列，否则报错！