【2阶】vue路由传参,过滤器格式化字符串

最新推荐文章于 2024-01-02 18:31:51 发布

小王码字

最新推荐文章于 2024-01-02 18:31:51 发布

阅读量248

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wangzz1217/article/details/128192627

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

二、在filters属性中添加格式化性别的过滤器sexFilter函数

一、在用户列表路由中跳转传参

从用户列表路由中跳转到修改用户的路由，并且传递参数id=100

<router-link to="user_update?id=100">修改用户</router-link>

二、创建修改用户的路由，接收参数

接收参数id，并且显示在页面上

<template id="template_user_update">
    <div>
        <h1>修改用户页面</h1>
        <p>
            接收到参数id：{{this.$route.query.id}}
        </p>
    </div>
</template>

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
</head>
<body>
<template id="template_top">
    <div style="width: 1000px; height: 200px; background-color: yellow; text-align: center;line-height: 200px;font-size: 24px">
        aaa
    </div>
</template>
<template id="template_left">
    <div style="width: 200px; height: 600px; background-color: gray; float: left">
        <router-link to="index">首页</router-link>
        <router-link to="user_list">用户列表</router-link>
        <router-link to="user_add">添加用户</router-link>
    </div>
</template>
<template id="template_right">
    <div style="width: 798px; height: 600px; border: 1px solid black; float: left">
        <router-view></router-view>
    </div>
</template>

<template id="template_user_list">
    <div>
        <h1>用户列表</h1>
        <router-link to="user_update?id=100">修改用户</router-link>
    </div>
</template>
<template id="template_user_add">
    <div>
        <h1>添加用户</h1>
    </div>
</template>
<template id="template_index">
    <div>
        <h1>欢迎使用xxx管理系统</h1>
    </div>
</template>
<template id="template_user_update">
    <div>
        <h1>修改用户页面</h1>
        <p>
            接收到参数id：{{this.$route.query.id}}
        </p>
    </div>
</template>

<div id="app" style="width: 1000px; margin-left: auto; margin-right: auto">
    <aa></aa>
    <bb></bb>
    <cc></cc>
</div>

<script>
    //注册模板
    Vue.component('aa', {
        template: '#template_top'
    });
    Vue.component('bb', {
        template: '#template_left'
    })
    Vue.component('cc', {
        template: '#template_right'
    })

    var pageUserList = {
        template: '#template_user_list'
    }

    var pageUserAdd = {
        template: '#template_user_add'
    }

    var pageIndex = {
        template: '#template_index'
    }

    var pageUserUpdate = {
        template: '#template_user_update'
    }

    //创建router对象
    var vt = new VueRouter({
        routes: [
            {path: '/user_list', component: pageUserList},
            {path: '/user_add', component: pageUserAdd},
            {path: '/index', component: pageIndex},
            {path: '/user_update', component: pageUserUpdate}
        ]
    });

    //创建vue实例
    new Vue({
        el: '#app',
        router: vt,
        created: function () {
            //页面加载之后在router-view中显示首页（index）
            this.$router.push("index");
        }
    })
</script>
</body>
</html>

一、vue对象中添加filters属性

二、在filters属性中添加格式化性别的过滤器sexFilter函数

filters:{ //自定义过滤器
    sexFilter: function (value) { //格式化性别字符串
        switch (value) {
            case 0:
                return '男';
            case 1:
                return '女';
            default:
                return '未知';
        }
    }
},

三、表格中格式化用户的性别

四、参考代码

网页代码

<tbody>
    <tr v-for="u in users">
        <td>{{u.id}}</td>
        <td>{{u.userName}}</td>
        <td>{{u.nickName}}</td>
        <td>{{u.sex | sexFilter}}</td>
        <td>{{u.birth}}</td>
        <td>{{u.phone}}</td>
        <td><img :src="u.img" style="width: 100px; height: 100px"/></td>
        <td>
            <button class="btn btn-link" @click="doUpdate(u.id)">修改</button>
            <button class="btn btn-link" @click="doDelete(u.id)">删除</button>
        </td>
    </tr>
</tbody>

vue代码

new Vue({
    el: '#app',
    data: {
        users: null
    },
    filters:{ //自定义过滤器
        sexFilter: function (value) { //格式化性别字符串
            switch (value) {
                case 0:
                    return '男';
                case 1:
                    return '女';
                default:
                    return '未知';
            }
        }
    }
});