文档章节

Vue中的自定义指令和过滤器

wftt
 wftt
发布于 2018/04/17 16:34
字数 867
阅读 158
收藏 0

一.自定义指令

1.全局自定义(无参数)

效果:实现h2标签内的标题刷新后随机更换颜色.

步骤:在main.js中先使用vue自定义指令,如第二章图中,设置一个名称,然后设置指令想要实现的效果;然后给需要的标签绑定指令,就可以达到效果了。

<h2 v-rainbow>{{blog.title}}</h2>
//全局:在main.js中自定义
//第一个参数为要定义的指令名称,第二个参数为绑定内容
Vue.directive('rainbow',{
	bind(el,binding,vnode){
 		el.style.color = '#' + Math.random().toString(16).slice(2,8);     //修改绑定元素的颜色
    }
})

2.全局自定义(有参数)

效果:根据绑定参数修改内容宽度.

步骤:同样,在main.js中先自定义指令进行设置达到的效果,然后给标签绑定指令即可。和无参数的区别   就是可以根据所给参数以及绑定的值进行判断,分情况对待,更好满足需求。

//特别注意:这里wide是字符串,不加单引号不正确
<div id="show-blog" v-theme:column="'wide'">    
    <h1>博客总览</h1>
    <div class="single-blog" v-for="blog in blogs">
      <h2 v-rainbow>{{blog.title}}</h2>
      <article>{{blog.body}}</article>
    </div>
</div>
//指令名称为theme,如果给定参数是column设置背景色和padding,如果绑定的值为wide最大宽度为1260px,如果为narrow为560px
Vue.directive('theme',{
	bind(el,binding,vnode){
		if(binding.value == 'wide'){
			el.style.maxWidth = '1260px';
		}else if(binding.value == 'narrow'){
			el.style.maxWidth = '560px';
		}

		if(binding.arg == 'column'){
			el.style.background = '#6677cc';
			el.style.padding = '20px';
		}
	}
})

3.局部自定义

直接在需要的子组件内定义并使用,代码如下,需要和name,data等同级,给定directives,然后设置就好了。

 name: 'show-blog',
 data(){
    return {
      blogs:[],
      search:''
    }
  },
  directives:{
    'rainbow':{
      bind(el,binding,vnode){
        el.style.color='#' + Math.random().toString(16).slice(2,8);;
      }
    }
  }

二.自定义过滤器

1.过滤器

效果:实现搜索功能,匹配标题中含有的关键字展示出来.

<div id="show-blog" v-theme:column="'wide'">    
    <h1>博客总览</h1>
    <input type="text" v-model="search" placeholder="搜索">
    <div class="single-blog" v-for="blog in filteredBlogs">
      <h2 v-rainbow>{{blog.title}}</h2>
      <article>{{blog.body}}</article>
    </div>
</div>

export default {
  name: 'show-blog',
  data(){
    return {
      blogs:[],
      search:''
    }
  },
  computed:{
    filteredBlogs:function(){
      return this.blogs.filter((blog)=>{
        return blog.title.match(this.search);
      })
    }
  }
}

代码如上,给搜索框绑定一个search,将输入的东西进行和博客内容进行匹配,匹配的博客放在computed中,返回和输入内容匹配的标题的blog,此时遍历时blog in fiteredBlogs,遍历处理过的blogs.

2.全局自定义过滤器

效果:所有博客标题大写

步骤:依然是在main.js中进行自定义,使用filter过滤器,第一个参数是要使用的名称,第二个参数是回调    函数,参数value用来接收传来的title,调用toUpperCase方法将其转换为大写。然后给标签绑定过滤器。

Vue.filter("to-uppercase",function(value){
   return value.toUpperCase();         //value接收title
})
<h2 v-rainbow>{{blog.title | to-uppercase}}</h2>

3.局部自定义过滤器

效果:同上

步骤:在子组件中直接写入filters进行设置,如下是两种方法,第一种比较常见。需要注意的是第一种方法   标签中使用时需要写to-uppercase,而第二种方法需要写toUpperCase.如果有多个过滤器,以逗号隔开,后面跟着写就可以了。

filters:{
    //第一种方法
    "to-uppercase":function(value){
      return value.toUpperCase();
    }
    //第二种方法
    // toUpperCase(value){
    //   return value.toUpperCase();
    // }
}

 

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
Vue.js 高级概念:Mixins,自定义指令,过滤器,过渡,状态管理 和 服务端渲染

搭建环境 (Vue.js 2.x) 下面利用 Vue-cli 搭建一个工程,首先安装Vue-cli 安装完成 执行Vue -V 检查是否安装成功,我的 Vue-cli 版本是2.9.6。 Mixins Vue 官方网站对 Mixins 定义:混入 ...

alentan
06/21
0
0
vue.js快速入门。

什么是Vue.js   Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。   Vue.js的目标是通过尽可...

笔阁
2015/12/23
10.2K
2
Vue 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
2018/07/17
0
0
Vue 与Angular、React框架的对比,你会学哪个?

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和M...

阿K1225
2018/10/29
143
0
Vue.js 优雅地集成第三方 JavaScript

原文地址:Sliding In And Out Of Vue.js 原文作者:Kevin Ball 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:LucaslEliane 校对者:Mcskiller, SevenOutman Vue....

LucasTwilight
03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
40分钟前
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
1
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
3
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部