Vue 测试版本:Vue.js v2.5.13

官网给了过滤器的两种使用方式:

1、你可以在一个组件的选项中定义本地的过滤器:

结合实例,我给两个代码:

<div id="app">
<input
type="text"
v-model="id"
placeholder="please enter your id"
/>
<p>your id is: {{ id| formatId }}</p>
</div>
window.onload = function() {
new Vue({
el: '#app',
data: {
id: ''
},
filters: {
formatId(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
}
},
});
};

2、在创建 Vue 实例之前全局定义过滤器:

方式 2 换一种 js 就行,html 不用变:

window.onload = function() {
Vue.filter('formatId', function(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
}); new Vue({
el: '#app',
data: {
id: ''
},
});
};

比较好理解,但是我觉得可以完善下,因为上面都没有用模板;

如果用了模板,第一种就失效了,只有第二种可行:

<div id="app">
<my-ele :id="id"></my-ele>
</div>
window.onload = function() {
Vue.component('my-ele', {
template: `
<div>
<input type="text" v-model="id"/>
<p>you id: {{id | formatId}}</p>
</div>
`,
props: ['id']
}); Vue.filter('formatId', function(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
});
new Vue({
el: '#app',
data: {
id: ''
}
});
};

虽然 开发环境下 会报错,但不影响功能,

如果把 js 换成第一种,就会失败:

window.onload = function() {
Vue.component('my-ele', {
template: `
<div>
<input type="text" v-model="id"/>
<p>you id: {{id | formatId}}</p>
</div>
`,
props: ['id']
}); new Vue({
el: '#app',
data: {
id: ''
},
filters: {
formatId(v) {
return v.length < 10 && v.length > 0 ? v.padStart(10, '0') : v;
}
}
});
};

功能失效;

如果采用 render() 函数,就更复杂了些,详情戳 Vue-双向绑定:从 html 到 模板 到 渲染函数

参考文档:

https://cn.vuejs.org/v2/guide/filters.html

Vue基础-在模板中使用过滤器的更多相关文章

  1. Vue基础项目模板

    https://github.com/wanglong/vue-element-admin.git 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍 一站式开源运维平台,分享给大 ...

  2. Django 模板中 变量 过滤器的使用方法

    一.变量       1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量.    2.使用dot(.)能够访问变量的属性    3.当模板引擎碰到dot的 ...

  3. Django 模板中 变量 过滤器 标签 的使用方法

    一.变量       1.变量的形式是:{{variable}}, 当模板引擎碰到变量的时候,引擎使用变量的值代替变量.    2.使用dot(.)能够访问变量的属性    3.当模板引擎碰到dot的 ...

  4. flask的jinja2模板中过过滤器的相关小内容

    jinja2模板中有自带的过滤器,有需要直接拿来使用.也可以自己定义过滤器 在过滤器中,有一些常见得操作及关键字.有对字符串的操作,还有对大小写转换的操作.还有对list的操作 过滤器的语法 {# 过 ...

  5. vue(基础二)_组件,过滤器,具名插槽

    一.前言 主要包括:  1.组件(全局组件和局部组件)                     2.父组件和子组件之间的通信(单层)                     3.插槽和具名插槽     ...

  6. 测试开发之Django——No7.Django模板中的过滤器

    1.add 将参数添加到值. 例如: {{ value|add:"2" }} 如果value是4,那么输出将是6. 此过滤器将首先尝试将两个值强制转换为整数.如果失败,它将尝试将值 ...

  7. Flask的jinja2模板中自定义过滤器的使用

    大部分的模板引擎都是支持过滤器功能的,jinja2也不例外,它提供了丰富的内置过滤器,但是有些时候还是没办法满足我们的需求,好在jinja2支持自定义过滤器,下面是一个简单的例子. 下面的例子完成了自 ...

  8. WPF 基础 - 在模板中找元素

    1. 在 ControlTemplate 中寻找元素 <Window.Resources> <ControlTemplate x:Key="cTmp"> & ...

  9. VUE基础实用技巧

    Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...

随机推荐

  1. jdbc链接基础

    1 jdbc 链接两种方式,通过jdbc链接mysql数据库,url:jdbc:mysql://ip:端口[/database name] 通过什么驱动器,链接什么数据库,数据库的ip,连接端口,可以 ...

  2. laravel 数据库查询的一些函数意义(未完)

    ->all() 查询数据库中的全部信息,一对象形式返回 $rows=UserModel::all(); ->get() 查询的执行函数,->toArray()将查询的是数据集转换成数 ...

  3. apache 2.2设置单IP多端口的虚拟主机

    系统配置为Centos 5.5 x85版,使用yum安装httpd 对于没有安装vim的,可以使用此命令安装:   yum -y install vim-enhanced 配置httpd.conf文件 ...

  4. CentOS7 安装 mplayer

    我google找到这个方法可以简单快速安装 mplayer 和 vlc,centos 7 only. Please google the latest release for the followin ...

  5. How to Install Xcode, Homebrew, Git, RVM, Ruby & Rails on Snow Leopard, Lion, Mountain Lion, and Mavericks

    After following many outdated and incomplete instructions for setting up a web development environme ...

  6. 树链剖分 + 后缀数组 - E. Misha and LCP on Tree

    E. Misha and LCP on Tree Problem's Link Mean: 给出一棵树,每个结点上有一个字母.每个询问给出两个路径,问这两个路径的串的最长公共前缀. analyse: ...

  7. 2015 Multi-University Training Contest 3 1006 Beautiful Set

    Beautiful Set Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5321 Mean: 给出一个集合,有两种计算集合的值的 ...

  8. contract

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  9. JAVA中有一个特殊的类: Object

    JAVA中有一个特殊的类: Object.它是JAVA体系中所有类的父类(直接父类或者间接父类). 此类中的方法可以使所的类均继承. 以下介绍的三种方法属于Object: (1) finalize方法 ...

  10. html的a标签的 href 和 onclick。

    主要用于给超链接添加点击事件. aa.html <html> <body> <span>this si</span> </body> < ...