国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue 2 | Part 5 列表渲染和事件監聽

Nekron / 880人閱讀

之前在vue里面綁定數據,都只是單個地綁定。這期我們來看一下怎樣渲染列表,然后通過事件監聽方法往列表里面增加item。

列表渲染

廢話不多說,直接上代碼:

  • {{ item }}

直接看效果,可見v-for循環了一遍list,把其中的每一項都綁定到li中去:

唯一需要注意的是,給v-for的值是 in 的形式。很容易就直接寫v-for="list"了。

HTML的部分,也可以用v-text來代替大胡子語法:

其實也可以直接循環數字,雖然好像實際中會這樣用的機會不大:

事件監聽

先做一個簡單的例子:點擊按鈕之后alert。

Vue的事件監聽,使用的是v-on指令,后面跟的就是需要監聽的事件。

在頁面監聽用戶交互事件是非常常用的,但是如果每次都要寫v-on,就會很繁瑣了,所以vue也為我們準備好了簡寫方法:

要記得v-bind的簡寫是:class,用的冒號,但是v-on用的是@,像@click這樣。

最后我們把這兩個新知識合并到一起,做一個可以讓用戶通過輸入文字來新增列表項的列子吧。

  • {{ item }}

這里需要特別講的,也許就只有this了。this指的其實是我們創建的這個vue實例,也就是app。在vue-devtools里面可以看到(在console里面log一下app也可以找到,由于圖片會太長,這里就不展示了):

最后是完成后的效果:

這期就到這里,敬請期待下一期:計算屬性。

寫在最后

源碼地址:https://github.com/levblanc/v...

視頻攻略:小的不才,為求一贊,自制 本期視頻攻略 在此。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81317.html

相關文章

  • Vue 2 | 基礎API系列文章合集

    摘要:在大家的鞭策和鼓勵下,這個基礎的系列終于完成了。關于更新的頻率,因為是我自己一個人在做,文案視頻都準備好了才發的話,最快也只能一周一更。最后這幾期可以密集地更新,完全是因為公司放假了。不過月份的更新速度真的不能保證,抱歉。 在大家的鞭策和鼓勵下,這個基礎API的系列終于完成了。所幸是沒有真的更到一百期才完結(笑)。最初是因為覺得錄視頻好玩,才挖的這個坑。也想過中途放棄,關掉專欄,但由于...

    instein 評論0 收藏0
  • VUE - MVVM - part12 - props

    摘要:看這篇之前,如果沒有看過之前的文章,移步拉到文章末尾查看之前的文章。而該組件實例的父實例卻并不固定,所以我們將這些在使用時才能確定的參數在組件實例化的時候傳入。系列文章地址優化優化總結 看這篇之前,如果沒有看過之前的文章,移步拉到文章末尾查看之前的文章。 前言 在上一步,我們實現 extend 方法,用于擴展 Vue 類,而我們知道子組件需要通過 extend 方法來實現,我們從測試例...

    bluesky 評論0 收藏0
  • VUE - MVVM - part4 - 優化Watcher

    摘要:關于中的的實現,差不多也就這樣了,當然這僅僅是基礎的實現,而且視圖層層渲染抽象成一個函數。不同于中的實現,這里少了很多各種標記和應用標記的過程。 看這篇之前,如果沒有看過之前的文章,可拉到文章末尾查看之前的文章。 回顧 首先我們思考一下截止當前,我們都做了什么 通過 defineReactive 這個函數,實現了對于數據取值和設置的監聽 通過 Dep 類,實現了依賴的管理 通過 Wa...

    CoffeX 評論0 收藏0
  • Vue 2 | Part 4 v-bind綁定元素屬性樣式

    摘要:它可以往元素的屬性中綁定數據,也可以動態地根據數據為元素綁定不同的樣式。綁定屬性最簡單的例子,我們有一張圖片,需要定義圖片的。注意樣式的寫法跟會有些許不同,橫杠分詞變成駝峰式分詞。這期就到這里,敬請期待下一期列表渲染和事件監聽。 這期跟大家分享的,是v-bind指令。它可以往元素的屬性中綁定數據,也可以動態地根據數據為元素綁定不同的樣式。 綁定屬性 最簡單的例子,我們有一張圖片,需要定...

    vboy1010 評論0 收藏0
  • Vue 2 | Part 8 組件通信

    摘要:實例和組件之間的通信先來看一下我們最后要完成的效果吧。在組件的內部監聽到用戶的事件后,執行自身的方法,把信號發布出去。所以可以直接把實例作為一個,在組件之間進行通信。比方說,我們希望點擊按鈕以后,另外一個組件可以接收到這個信號。 當組件監聽到用戶的行為,需要觸發一些界面交互的時候,實例與組件之間、組件相互之間就需要進行通信了。Vue里面有兩個api可以幫助我們輕松地完成這件事,它們是$...

    MartinDai 評論0 收藏0

發表評論

0條評論

Nekron

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<