Vue.js创建Calendar日历效果

使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。
实现一个HTML的日历效果。

html 部分

 
 

 

  
❮
  

  {{ currentYear }}
  {{ currentMonth }}月
  
  
❯
 
 
 
 

 
一
 
二
 
三
 
四
 
五
 
六
 
日
 
 
 

 

  
  {{ day.getDate() }}
  
  
  {{ day.getDate() }}
  {{ day.getDate() }}
  
 
 

id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。

完整代码：

 
 
 
 
 
 
 
CSS 日历
 

  

  

   
❮
   

   {{ currentYear }}
   {{ currentMonth }}月
   
   
❯
  
  
  

  
一
  
二
  
三
  
四
  
五
  
六
  
日
  
  

  

   
   {{ day.getDate() }}
   
   
   {{ day.getDate() }}
   {{ day.getDate() }}
   
  
  
 
 
 
 

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。