试用Vue CDN + Element

最新推荐文章于 2025-07-04 16:00:20 发布

原创最新推荐文章于 2025-07-04 16:00:20 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 同时被 2 个专栏收录

21 篇文章

订阅专栏

ElementUI

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<style>

</style>
<body>
<div id="app">
    <!--选择时间-->
    <el-time-select
            v-model="value1"

            :picker-options="{
    start: '00:00',
    step: '01:00',
    end: '24:00'
  }"

            placeholder="选择时间"
    >
    </el-time-select>

    <!--选择日期-->
    <div class="container" >
        <div class="block">
            <span class="demonstration">周</span>
            <el-date-picker
                    v-model="value3"
                    type="week"
                    format="yyyy-WW"
                    placeholder="选择周"
                    @change="changeZhou">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">月</span>
            <el-date-picker
                    v-model="value4"
                    type="month"
                    placeholder="选择月"
                    @change="changeYue">
            </el-date-picker>
        </div>
    </div>
    <div class="container">
        <div class="block">
            <span class="demonstration" style="width:100px;display: inline-block">年</span>
            <el-date-picker
                    v-model="value5"
                    type="year"
                    placeholder="选择年"
                    @change="changeNian">
            </el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration" style="width:100px;display: inline-block">多个日期</span>
            <el-date-picker
                    type="dates"
                    v-model="value6"
                    placeholder="选择一个或多个日期"
                    @change="changeDGRQ">
            </el-date-picker>
        </div>
    </div>

    <el-button type="primary" v-on:click="returnValue">获取值<i class="el-icon-circle-plus-outline el-icon--right" ></i></el-button>
</div>

<script>

    var app = new Vue({
        el: "#app",
        data(){
            return {
                value1: '',
                value3: '',
                value4: '',
                value5: '',
                value6: ''
            };
        },
        methods:{
            returnValue(){
                console.log("周选择器的值为 : "+app.value3 + " == 月选择器的值为 : "+app.value4 + " == 月选择器的值为 : "+app.value5 + " == 月选择器的值为 : "+app.value6  );
            },
            changeZhou(){
                console.log("选择周 : "+app.value3);
            },
            changeYue(){
                console.log("选择月 : "+app.value3);
            },
            changeNian(){
                console.log("选择年 : "+app.value3);
            },
            changeDGRQ(){
                console.log("选择多个日期 : "+app.value3);
            }
        }
    })


</script>
</body>
</html>