vue 中 filter 的使用与注册

七亿少女的劫丨

vue 中 filter 的使用与注册

1.filterBy 输入过滤与orderBy 排序过滤
2.字符串的filter操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>filter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
label{
    color: red;
}
</style>
<body>
    <div id="app">
        <label >输入框过滤</label><br />
        <input type="text" v-model="searchText">
        <ul>
            <li v-for="car in cars|filterBy searchText in 'name'">{{car.name}}</li>
            <br />
            <label>按tag的id从小到大排列</label>
            <li v-for="car in cars|orderBy fileid reverse ">{{car.name}}</li>
            <!-- 引入vue1.0版本  使用filteBy ,orderBy -->
        </ul>
        <input type="text" v-model="msg">
        <br />
        <label>首字母大写：{{msg| capitalize}}</label> <br />
        <label>大写：{{msg| uppercase}}</label> <br />
        <label>小写：{{msg| lowercase}}</label> <br />
        <label>反转：{{msg| reverse}}</label> <br />
    </div>
</body>
<script src="vue-1.0.15.js"></script>
<script>
    Vue.filter('reverse', function (value) {
        return value.split('').reverse().join('');
    })
    new Vue({
        el: '#app',
        data: {
            searchText: '',
            fileid: 'tag',
            reverse: false,
            msg: '',
            cars: [{
                    name: '1-快车',
                    tag: 1
                },
                {
                    name: '3-顺风车',
                    tag: 3
                },
                {
                    name: '2-专车',
                    tag: 2
                },
                {
                    name: '0-出租车',
                    tag: 0
                }
            ]
        }
    })
</script>
</html>

ps:vue js 2.0中已摒弃，需引入vue 1.0 版本。

vue 中 filter 的使用与注册

vue 中 filter 的使用与注册

七亿少女的劫丨

相关推荐