Element-UI之 El-select 页面跳转

最新推荐文章于 2024-07-18 15:38:02 发布

IRON_MAN_LEVEL1

最新推荐文章于 2024-07-18 15:38:02 发布

阅读量1.4k

点赞数

分类专栏：前端笔记文章标签：前端 elementui

本文链接：https://blog.csdn.net/IRON_MAN_LEVEL1/article/details/121509024

版权

前端笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏


<html>
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <style>
            @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
        </style>

        <!-- import vue.js  -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- import JavaScript -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    </head> 
        <body> 
            <div id="app">
                <template>
                  <el-select v-model="value" placeholder="请选择" @change="changenewClass">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
            </div>
            <script>
                var Main = {
                    data() {
                        return {
                            options: [{
                                value: '选项1',
                                label: '黄金糕'
                            }, {
                                value: '选项2',
                                label: '双皮奶'
                            }, {
                                value: '选项3',
                                label: '蚵仔煎'
                            }, {
                                value: '选项4',
                                label: '龙须面'
                            }, {
                                value: '选项5',
                                label: '北京烤鸭'
                            }],
                            value: ''
                        }
                    },
                    methods: {
                        changenewClass() {
                            console.log(this.value);
                            if(this.value==='选项1') {

                                // 另外添加一个跳转页面
                                window.location.href = './h2.html';
                            }
                            else {
                                // 另外添加跳转页面
                                window.location.href = './h4.html';
                            }
                            this.$forceUpdate();
                        }

                    },
                }
                var Ctor = Vue.extend(Main)
                new Ctor().$mount('#app')
            </script>
        </body>
</html>

前端接触，初步见识，先来一个简单的跳转