一、重点:
1、引入polyfill

<script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3.6.5/minified.js"></script>

2、引入babel

<script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

3、需要使用的script标签内容加上 type="text/babel" data-presets="env"

二、完整代码如下:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <title>html中兼容使用vue和element</title>
    <!--  引入polyfill  -->
    <script src="https://cdn.jsdelivr.net/npm/core-js-bundle@3.6.5/minified.js"></script>
    <!--  引入babel  -->
    <script type="text/javascript" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 引入element样式 -->
    <link href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>

</head>
<style>
</style>

<body>
    <div id="main">
        <span>日期</span>
        <el-date-picker size="small" v-model="planDate"
            type="daterange" range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button size="small" @click="searchClk">查询</el-button>
    </div>
    <script type="text/babel" data-presets="env">
        var vm = new Vue({
            el: '#main',
            data: {
                selectDate: '', // 存储第一个选定日期的时间戳
                planDate: [],
            },
            methods: {
                // 点击查询
                searchClk() {
                    this.$message({
                                message: '点击查询',
                                type: 'success'
                            });
                },
                getList() {
                    this.$message({
                                message: '查询成功',
                                type: 'success'
                            });
                }
            },
            mounted() {
                this.getList()
            },
        })
    </script>
</body>

</html>

浪迹天涯小king
15 声望1 粉丝