一、重点：
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>
