过滤器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <!--filter 不会修改用户的原始数据，只会在原有的基础上过滤，，filter自动传值，默认是自己-->
    <div>
        <input v-model="length">{{ length | mater("m") }}
    </div>
    <hr>
    <div>
        <input v-model="price">{{ price | currency("usd") }}
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Vue.filter("currency", function (val, unit) {
    val = val || 0;
    unit = unit || "元";
    return val + unit
});
Vue.filter("mater", function (val, unit) {
    val = val || 0;
    unit = unit || "m";
    return (val / 1000).toFixed(2) + unit
});

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

 

posted @ 2018-01-30 18:52  前方、有光  阅读(112)  评论(0)  编辑  收藏  举报