vue过滤器

原创 2018年04月15日 18:05:32

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="length"/>
        {{length | meter}}
    </div>
    <hr>
    <div>
        <input type="text" v-model="price"/>
        {{price | currency('USD')}}
    </div>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js

Vue.filter('meter', function(val, unit){
    val = val || 0;
    unit = unit || 'm';
    return (val/1000).toFixed(2) + unit;
})

Vue.filter('currency', function(val, unit){
    val = val || 0;
    unit = unit || ""
    return val+unit;
})

new Vue({
    el: '#app',
    data: {
        price: 10,
        length: 10
    }
})

Vue--过滤器

vue – 过滤器一、Vue提供的过滤器vue本身提供了很多便利的过滤器,这里列举一下,具体的可以参考官方文档过滤器。例子中使用到的data和methodsdata:{ message...
  • w_q_1025
  • w_q_1025
  • 2016-11-28 16:59:35
  • 1965

vue学习(一) vue指令和过滤器

vue官网:vue官网 手册:vue手册What is vue? 一个mvvm框架(库)、和angular类似 比较容易上手、小巧Compare with Angular - vue :...
  • sJohnny
  • sJohnny
  • 2017-02-17 20:29:41
  • 921

vue2.0中过滤器的使用

vue2.0过滤器的使用规则: vue.js在2.0版本中,相对于1.0版本做了比较大的改动,2.0版本中,过滤器只用于插入文本中({{}})。1.0版本中指令(如:v-for,v-on等)里边的过滤...
  • u013910340
  • u013910340
  • 2017-05-22 21:41:53
  • 7032

Vue 2.0 时间过滤器

Title Vue.filter("data",function (input) { var d = new Date(input); ...
  • qq_35776392
  • qq_35776392
  • 2017-10-28 10:36:11
  • 248

Vue过滤器与计算属性

原文地址:http://www.cnblogs.com/lolDragon/p/6247651.html 过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时...
  • tanga842428
  • tanga842428
  • 2017-08-29 16:41:47
  • 1326

Vue入门 03-vue过滤器模板等

一、vue模板 在vue中使用原生html中嵌入{{}}表达式用于绑定数据。 在vue中表单数据是双向绑定的,即数据更新,模板也会进行相应的更新 注:若要只绑定最初数据,则使用v-on...
  • Sophie_U
  • Sophie_U
  • 2017-02-06 20:38:17
  • 528

Vue2.0里过滤器容易踩到的坑

vue2.0里,不再有自带的过滤器,需要自己定义过滤器。定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。Vue.filter('filtername',funct...
  • sinat_36555135
  • sinat_36555135
  • 2017-04-25 10:57:58
  • 11224

vue2.0 自定义日期时间过滤器

vue2.0 自定义时间日期过滤器 filters:
  • m0_37068028
  • m0_37068028
  • 2017-06-07 11:46:40
  • 7751

用vue构建项目笔记7(在vue中引用公共过滤器filter)

如何在vue-cli中引入公用filter过滤器
  • qq_39507727
  • qq_39507727
  • 2017-08-24 10:09:25
  • 2014

vue实现货币过滤器

自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。 所以要让组件的 v-model 生效,它必须: 接受一个 value 属性在有新的 value...
  • qq_24122593
  • qq_24122593
  • 2017-02-08 10:50:43
  • 2844
收藏助手
不良信息举报
您举报文章:vue过滤器
举报原因:
原因补充:

(最多只允许输入30个字)