<!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>
