<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>日历</title>
<script src="vue.js"></script>
<script src="jquery-3.4.1.js"></script>
<!-- element ui组件 -->
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="app">
<el-calendar>
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template slot="dateCell" slot-scope="{date, data}">
<p>
<!--这里原本有动态绑定的class，去掉-->
{{ data.day.split('-').slice(1).join('-') }}<br /> {{dealMyDate(data.day)}}
</p>
</template>
</el-calendar>
</div>
</body>
<script>
// console.log(data);
var vm;
$(function () {
vm = new Vue({
el: '#app',
data: {
input2:'',
resDate: [
{ "date": "2020-12-01", "content": "放假" },
{ "date": "2020-12-02", "content": "去交电费" },
{ "date": "2020-12-03", "content": "去学习vue" }
]
},
mounted:function(){},
methods: {
// 日历
dealMyDate(v) {
console.log(v)
let len = this.resDate.length
let res = ""
for (let i = 0; i < len; i++) {
if (this.resDate[i].date == v) {
res = this.resDate[i].content
console.log(this.resDate[i].content);
break
}
}
return res
}
}
})
})
</script>
</html>
