真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們
028-86922220

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們

 添加任務：
 
 
  

   {{unCheckedLength}}個任務未完成
  
   所有任務
   未完成任務
   完成任務
  
 
 
  還沒有添加任何任務
  
   
    
     
      
      {{item.title}}
     

Vue實例部分

var vm = new Vue({
 el: ".main",
 data: {
  list:list,
  things:"",
  editItem:"",
  beforeTitle:"",
  visibility:"all",
  inputId:"",
 }, 
 watch:{
  list:{
   handler:function(){
    store.save("todolist",this.list)
   },
   deep:true
  }
 },
 computed:{
  unCheckedLength(){
   return this.list.filter(function(item){
    return item.isChecked == false
   }).length
  },
  filteredList(){   
   return filter[this.visibility] ? filter[this.visibility](this.list) : list
  }
 },
 methods: {
  addTodo(ev){
   if(this.things !== ""){
    var item = {
     title:this.things,
     isChecked:false, 
    }
    this.list.push(item)
   }    
   this.things = "";
  },
  deleteTodo(item){
   var index = this.list.indexOf(item);
   this.list.splice(index,1);
  },
  editTodo(item){ 
   this.beforeTitle = item.title;
   this.editItem = item
  },
  edited(item){
   this.editItem = ""
  },
  cancel(item){
   item.title = this.beforeTitle;
   this.editItem = "";
   this.beforeTitle = ""
  }
 },
 directives:{
  "focus":{         
   update(el,binding){
    if(binding.value){
     el.focus()
    }

   }
  }
 }
});

這是一個基本的Vue實例，el是和DOM元素連接的掛載點，data是代理數(shù)據(jù)，在DOM的內(nèi)容中如果要用到代理數(shù)據(jù)就用{{xxx}}表示，比如{{list}}，{{visibility}}，而當data中的代理數(shù)據(jù)出現(xiàn)在DOM標簽里的時候就不需要用花括號。

new Vue({
 el: ".main",
 data: {
  list:list,
  things:"",
  editItem:"",
  beforeTitle:"",
  visibility:"all",
  inputId:"",
 }
}）

Vue要用大的方法都放在methods部分

methods: {
   addTodo(ev){
    if(this.things !== ""){
     var item = {
      title:this.things,
      isChecked:false, 
     }
     this.list.push(item)
    }    
    this.things = "";
   },
   deleteTodo(item){
    var index = this.list.indexOf(item);
    this.list.splice(index,1);
   },
   editTodo(item){ 
    this.beforeTitle = item.title;
    this.editItem = item
   },
   edited(item){
    this.editItem = ""
   },
   cancel(item){
    item.title = this.beforeTitle;
    this.editItem = "";
    this.beforeTitle = ""
   }
 }

還有計算屬性

computed:{
  unCheckedLength(){
   return this.list.filter(function(item){
    return item.isChecked == false
   }).length
  },
  filteredList(){   
   return filter[this.visibility] ? filter[this.visibility](this.list) : list
 }
}

觀察屬性

watch:{
  list:{
   handler:function(){
    store.save("todolist",this.list)
   },
   deep:true
  }
}

自定義屬性

directives:{
  "focus":{         
   update(el,binding){
    if(binding.value){
     el.focus()
    }

   }
  }
}

在HTML中要綁定這些數(shù)據(jù)，Vue也提供了一套指令：

v-bind綁定一個或多個特性，一般用于綁定class和style， v-on 綁定事件， v-show，v-if都是根據(jù)條件渲染元素，v-for是渲染列表…等等，我就不一一贅述了?？梢匀ue中文官網(wǎng)看，講的很詳細。

以上是“Vue如何制作Todo List網(wǎng)頁”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)網(wǎng)站建設公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。