快捷導(dǎo)航

vue.js實(shí)例todoList項(xiàng)目

更新時(shí)間：2017年07月07日 09:16:32 作者：Demon_Han

本篇文章主要介紹了vue.js實(shí)例todoList項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

新建組件todoList.vue，在App.vue中引入

import TodoList from "./components/todoList";

export default {
 name: 'app',
 components: {
  TodoList
 }
}

<template>
 <div id="app">
  <h1>TO DO LIST !</h1>
  <todo-list></todo-list>
 </div>
</template>

三處缺一不可，第一處引入文件，第二處注冊組件，第三處聲明組件位置

由于html中不區(qū)分大小寫，所以駝峰命名方式中的大寫變?yōu)?，即第三處中寫成todo-list，不理解的可以動手實(shí)驗(yàn)一下！

todoList.vue中data如下：

data () {
   return{
     items:[
      {
        label:"homework",
        finish:false
      },
      {
        label:"run",
        finish:false
      },
      {
        label:"drink water",
        finish:false
      }
     ]
   }
 }

有三件事情：homework、run、drink water，通過v-for渲染：

<ul>
  <li v-for="item in items">{{item.label}}</li>
</ul>

列表展示完成，現(xiàn)在添加點(diǎn)擊列表，改變列表樣式，標(biāo)記為完成！

<ul>
  <li v-for="item in items" v-on:click="done(item)" v-bind:class="{done:item.finish}">{{item.label}}</li>
</ul>

添加v-on:click，v-bind:class

v-on:click=”done(item)”表示點(diǎn)擊執(zhí)行done方法，item作為參數(shù)。

v-bind:class=”{done:item.finish}”表示，如果item.finish==true時(shí)，class=“done”。

methods:{
  done:function (item) {
    item.finish = !item.finish
  }
 }

.done{
  color: red;
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一篇文章帶你吃透Vuex3的狀態(tài)管理
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下
2022-07-07
Vue+Vant 圖片上傳加顯示的案例
這篇文章主要介紹了Vue+Vant 圖片上傳加顯示的案例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue實(shí)現(xiàn)標(biāo)簽云效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue標(biāo)簽云的實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-08-08
Vue中的數(shù)據(jù)驅(qū)動解釋
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
在Vue項(xiàng)目中,防止頁面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁面被縮放和放大示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
完美解決通過IP地址訪問VUE項(xiàng)目的問題
這篇文章主要介紹了完美解決通過IP地址訪問VUE項(xiàng)目的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue使用sass根據(jù)環(huán)境進(jìn)行樣式判斷區(qū)分方式
這篇文章主要介紹了vue使用sass根據(jù)環(huán)境進(jìn)行樣式判斷區(qū)分方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue實(shí)現(xiàn)圖片切換效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
Vue內(nèi)存泄漏的識別和解決方案
Vue是人氣爆棚且地表最強(qiáng)的JS（JavaScript）框架,祂允許我們構(gòu)建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識別和修復(fù)這些問題的錦囊妙計(jì)
2023-11-11
vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊
這篇文章主要介紹了vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03