thymeleaf+element+vue

最新推荐文章于 2024-07-21 22:31:16 发布

Goldfish～

最新推荐文章于 2024-07-21 22:31:16 发布

阅读量6.8k

点赞数

本文链接：https://blog.csdn.net/meizhuxun7340/article/details/81364037

版权

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    <el-row>
        <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
            <el-card :body-style="{ padding: '0px' }">
                <div style="padding: 14px;">
                    <span th:text="${user.getUsername()}"></span>
                    <div class="bottom clearfix">
                        <time class="time">{{ currentDate }}</time>
                        <el-button type="text" class="button">操作按钮</el-button>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>

<span th:text="${user.getRegistertime()}"></span>
<span th:text="${user.getUserlevel()}"></span>


</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentDate: new Date()
            };
        },
        methods: {
            next: function (step) {
            }
        }
    })

</script>
</html>