vue取div当前宽度

vue 过滤器

1 关于 vue 过滤器

在vue1.0的时候其实是内置了过滤器的，但是考虑到好多过滤器并不一定会被开发所调用，所以把原本内置的过滤器就给去掉了，但是过滤器还是比较普遍的，所以我们从vue2.0之后就需要自己定义过滤器

2 vue 过滤器分类

过滤器分为两种，一种是局部过滤器，一种全局过滤器。所有的过滤器都是函数，并且参数为要过滤的数据。

局部过滤器：只允许在当前组件中使用
全局过滤器：所有组件都可以使用

1) 局部过滤器

// 创建 Vue 实例，得到 ViewModel

以上代码 filters 这个对象定义的就是局部过滤器，下面代码展示在组建中如何使用过滤器：

<div id="app"><p>{{ msg | dataFormat}}</p>// 结果   filterxxxxx</div>

当然你也应该在想，这样的过滤器使用起来可能会比较笨重，不够灵活，过滤器既然是函数，那是否可以传参呢？接下来我们通过参数让过滤器的使用变得更加灵活。

// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: 'filter'},methods: {},//定义私用局部过滤器。只能在当前 vue 对象中使用filters: {// msg表示要过滤的数据// a表示传入的参数dataFormat(msg,a) {return msg+a;}}});<!--html部分--><div id="app"><p>{{ msg | dataFormat("你好")}}</p><!--结果   <p>filter你好</p>--></div>

2) 全局过滤器

<script>// 定义一个 Vue 全局的过滤器，名字叫做  toDouble 补零Vue.filter('toDouble', function(msg) {// 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则return msg < 10 ? msg : "0" +msg})</script>
<!-- html // -->
<div> {{ 9 | toDouble }} </div><!-- // 结果 <div>09</div> -->

总结

全局的过滤器要比局部过滤器使用的更广泛一些，说白了我们为什么要使用过滤器，其实就跟使用函数是一样，我们想把一些方法封装，供其它组件使用，这样调用起来方便，开发更快捷。
注意： 如果全局过滤器和局部过滤器名字重复，我们会按照远近使用，优先级：局部>全局

过滤器并不是只可以使用一个，一个数据可以用多个过滤器，从左向右执行，注意的下一个过滤器接收的是上一个过滤器的处理结果，因此千万要注意使用顺序

此文转载自：

千锋HTML5学院

原文链接：

千锋HTML5学院：vue 过滤器

扩展：

Eric：Webpack4.x配置示例demozhuanlan.zhihu.com

Eric：Vue-Router路由与配置，希望学习前端的小伙伴能用上zhuanlan.zhihu.com

vue取div当前宽度_vue 过滤器相关推荐

vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
vue filter对象_vue 过滤器
vue 过滤器 1 关于 vue 过滤器在vue1.0的时候其实是内置了过滤器的,但是考虑到好多过滤器并不一定会被开发所调用,所以把原本内置的过滤器就给去掉了,但是过滤器还是比较普遍的,所以我们从v ...
vue 点击div 获取位置_Vue中组件之间8种通信方式，值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
VUE中的模板语法以及过滤器和双向数据绑定
目录: 1. 模板语法 1.1 插值 1.1.1 文本 1.1.2 html 1.1.3 属性 1.1.4 表达式 1.2 指令 1.2.1 核心指令 1.2.1.1 v-if |v-else-if| ...
gateway中的局部过滤器_vue 过滤器
vue 过滤器 1 关于 vue 过滤器在vue1.0的时候其实是内置了过滤器的,但是考虑到好多过滤器并不一定会被开发所调用,所以把原本内置的过滤器就给去掉了,但是过滤器还是比较普遍的,所以我们从v ...
vue的侦听器，过滤器和过度动画的了解
目录侦听器普通监听深度监听百度搜索案例过滤器局部过滤器全局过滤器全局过滤器和局部过滤器的区别封装时间过滤器总结计算属性和 watch 的区别 vue过渡动画 transition ...
VUE实现DIV点击换色
VUE实现点击DIV背景换色 VUE实现DIV点击换色这个方法初衷是为了代替button做一个更加自由添加图标标题之类的按钮来代替tab页签,所以后续还可以绑定一些自己的事件,如跳转页面,窗口弹出. ...
jsjq：获取div的宽度、高度、屏幕距离方法总结
jq获取div的宽度只是获取content宽度 var content = $('div'). width(); 获取content+padding的宽度 var contentWithPaddin ...

vue取div当前宽度_vue 过滤器

vue 过滤器

1 关于 vue 过滤器

2 vue 过滤器分类

1) 局部过滤器

以上代码 filters 这个对象定义的就是局部过滤器，下面代码展示在组建中如何使用过滤器：

当然你也应该在想，这样的过滤器使用起来可能会比较笨重，不够灵活，过滤器既然是函数，那是否可以传参呢？接下来我们通过参数让过滤器的使用变得更加灵活。

2) 全局过滤器

总结

vue取div当前宽度_vue 过滤器相关推荐

最新文章

热门文章