vue 过滤器 基本用法

使用地点:双花括号插值和v-bind表达式。

<div id="app">
    <p>{{ message|capitalize}}</p>
    <div v-bind:id="message|capitalize"></div>
</div>
new Vue({
    el:"#app",
    data:{
        message:"pwd"
    },
    filters:{
        capitalize:function(value){
            return value+‘a‘
        }
    }
})

注意:过滤器函数接收的第一个值是message,依次是传的值。
过滤器是可以叠加的,后面过滤器接收前面过滤器的返回值。

<div id="app">
    <div v-bind:id="message|capitalize(‘a‘,‘b‘)|gl"></div>
</div>
var app=new Vue({
    el:"#app",
    data:{
        pwd:"pwd"
    },
    filters:{
        capitalize:function(value,x,y){
            return value+x+y;
        },
        gl:function(value){
            value=value.toString();
            return value.toUpperCase();
        }
    }
})

原文地址:https://www.cnblogs.com/lguow/p/10129671.html

时间: 2024-08-30 07:39:43

vue 过滤器 基本用法的相关文章

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

vue 过滤器用法

Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持). <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 1.在一个组件的选项中定义本地的过滤器: filters: { w

cdn模式下vue的基本用法

我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面. 我们知道些jq插件时会在IFFE中传入jQuery,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写.其实vue中new Vue()对象, 效果也是类似,可以避免vue范围类的数据或变量被污染. 我们先来看一些基本的用法 插入文本值 v-html 直接插入html结构 v-bind属性 <a :href="url">

Vue:基本用法。

一.起步 1.下载核心库vue.js bower info vue #查看版本号 npm init --yes #下载vue.js cnpm install vue --save 版本 v2.5.17 目前最新版本() vue2.0比1.0相比最大的变化就是引入Virtual DOM(虚拟DOM),页面更新效率高,速度更快 2.hello world(对比 angular)2.1angular实现 js: let app=angular.module("myApp",[]) app.c

vue过滤器 即通道符 &quot;|&quot;

1,用法:两种 <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> 2,定义方式:两种 1)在一个组件的选项中定义本地的过滤器:与生命周期钩子同级, filters: { capitalize: function (value) { if (!value) return '' va

AngularJS Filter(过滤器)用法

一.在视图模板(View Template)中使用 在表达式中应用Filters (过滤器) 需要遵循格式如下: {{ expression | filter }}        即         {{ 表达式 | 过滤器 }} 例如:{{ 12 | currency }}     输出为    $12.00 在输出结果中应用Filters (过滤器) 通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源. 需要遵循格式如下: {{ expression

Vue过滤器

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> &

Servlet过滤器Filter用法

1 Servlet 过滤器方法 过滤器是一个实现了 javax.servlet.Filter 接口的 Java 类.javax.servlet.Filter 接口定义了三个方法:public void doFilter (ServletRequest, ServletResponse, FilterChain)该方法完成实际的过滤操作,当客户端请求方法与过滤器设置匹配的URL时,Servlet容器将先调用过滤器的doFilter方法.FilterChain用户访问后续过滤器. public vo

vue路由高级用法

五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',redirect:'/list'}path:'*' 异常处理 {path:'*',component:'NotFound'} <!doctype html> <html> <head> <meta charset="UTF-8"> <ti