[Vue.js]学习笔记-Vue.js模板语法-过滤器

范范 · 发表于 2018-12-5 17:36:26

[Vue.js]学习笔记-Vue.js模板语法-过滤器

导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js的模板语法有如下几种（点击进入各个详情介绍哦）：

1. 插值

2. 属性

3. 表达式

4. 指令

5. 参数

6. 用户输入

7. 过滤器

Vue.js模板语法-过滤器学习笔记如下：

Vue.js允许用户自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下。

[HTML] 纯文本查看 复制代码

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->[/align][align=left]<div v-bind:id="rawId | formatId"></div>

另外需要注意的是： 过滤器函数接受表达式的值作为第一个参数。

实例： 对输入的字符串第一个字母转为大写

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'sufeinet.com'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

实例解析：

1. 在js中给message赋值为： sufeinet.com'

2. 通过过滤器， value则为该过滤器对应的参数值，作为过滤器的参数处理

3. 可以看到过滤器的方法为，将参数的第一个字符toUpperCase，即变为大写，再加上该参数其它字符

范范 · 发表于 2018-12-5 17:36:49

过滤器可以串联：如下面的用法：

[HTML] 纯文本查看 复制代码

{{ message | filterA | filterB }}

范范 · 发表于 2018-12-5 17:37:29

另外过滤器是 JavaScript 函数，因此可以接受参数：

[HTML] 纯文本查看 复制代码

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

liu · 发表于 2018-12-5 17:47:22

真是难得给力的帖子啊。

Amy · 发表于 2018-12-5 17:47:46

我只是路过打酱油的。

站长苏飞 · 发表于 2018-12-5 18:05:30

我只是路过打酱油的。

竹林风 · 发表于 2018-12-6 17:47:44

真是难得给力的帖子啊。

		自动登录	找回密码
密码			马上注册

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js模板语法-过滤器

相关帖子