【Vue.js學習筆記】7：v-for渲染,Vue的小Demo

阿新 • • 發佈：2018-12-26

v-for渲染

v-for是Vue中常用的列表渲染方法，可以將一個列表渲染為一系列的HTML元素，也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style2.css">
    <script 
 src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--這個vue-app是根容器-->
<div id="vue-app">
    <h4>遍歷字串陣列:</h4>
    <ul>
        <li v-for="c in characters">{{c}}</li>
    </ul>
    <h4>遍歷物件陣列:</h4>
    < 
ul>
        <li v-for="u in users">{{u.name}},{{u.age}}</li>
    </ul>
    <h4>帶下標的遍歷:</h4>
    <ul>
        <li v-for="(c,i) in characters">{{c}}的下標是{{i}}</li>
    </ul>
    <h4>不放在列表裡,而是放在div裡(一下生成多個格式一樣的div很方便):</h4>
    <div v-for 
="(u,i) in users" style="border: 1px solid">
        <p>{{i}} . {{u.name}}</p>
        <p>{{u.age}}</p>
    </div>
    <h4>有時不需要那麼多div,只是要做多元素渲染,在template上使用v-for:</h4>
    <template v-for="(u,i) in users">
        <p>{{i}} . {{u.name}}</p>
        <p>{{u.age}}</p>
    </template>
    <h4>遍歷物件(相當於遍歷一個字典):</h4>
    <template v-for="(u,i) in users">
        <p>現在是第{{i+1}}個物件</p>
        <div v-for="(v,k) in u">{{k}}={{v}}</div>
    </template>
</div>
<script src="app8.js"></script>
</body>
</html>

app8.js

// 例項化vue物件
new Vue({
    el: "#vue-app",
    data: {
        // 要遍歷的兩個陣列
        characters: ["Tom", "Flora", "John"],
        users:[
            {name:"lzh1",age:21},
            {name:"lzh2",age:22},
            {name:"lzh3",age:23}
        ]
    }
});

執行結果

在這裡插入圖片描述

Vue的小Demo

本來教學視訊裡是沙袋，不過找不到素材，就用一folder的素材代替了。

這個Demo就是不斷點選一個按鈕，然後減少一個耐久度值，並通過動態繫結css在一個進度條上顯示出來，當減少到0時把那個按鈕隱藏掉，同時把圖片更換成被打破的folder。點選重新開始就會還原這些值。

index.html

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style3.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--這個vue-app是根容器-->
<div id="vue-app">
    <!--圖片-->
    <!--用動態繫結css樣式來實現圖片的更換-->
    <div id="folder" v-bind:class="{burst:ended}"></div>
    <!--進度情況-->
    <div id="progress-bar">
        <!--用資料別繫結,將耐久度繫結到這個div的樣式上並構成百分比-->
        <div v-bind:style="{width:health+'%'}"></div>
    </div>
    <!--控制按鈕-->
    <div id="controls">
        <!--用v-on控制點選時觸發的方法,用v-show控制敲擊按鈕何時不展示-->
        <button v-on:click="punch()" v-show="!ended">敲擊</button>
        <button v-on:click="restart()">重新開始</button>
    </div>
</div>
<script src="app9.js"></script>
</body>
</html>

app9.js

// 例項化vue物件
new Vue({
    el: "#vue-app",
    data: {
        health: 100,//100-進度條的進度,即folder的耐久度..
        ended: false //folder是否已經被打破
    },
    methods: {
        //點選"敲擊"
        punch: function () {
            this.health -= 10;
            if (this.health <= 0) {
                this.ended = true;
            }
        },
        //點選"重新開始"
        restart: function () {
            this.health = 100;
            this.ended = false;
        }
    }
});

style3.css

#folder {
    width: 400px;
    height: 500px;
    margin: 0 auto;
    background: url("./img/folder.png") center no-repeat;
    /*圖片佔容器80%*/
    background-size: 80%;
}

/*動態繫結的css樣式,當ended為true時這裡的樣式將生效*/
#folder.burst{
    background-image: url("./img/folder_broken.png");
}

#progress-bar{
    width:200px;
    border: 2px black solid;
    margin: 0 auto 20px auto;
}

#progress-bar div{
    height: 20px;
    background-color: crimson;
}

#controls{
    width: 160px;
    margin: 0 auto;
}

#controls button{
    margin-left: 20px;
}

執行結果

在這裡插入圖片描述

【Vue.js學習筆記】7：v-for渲染,Vue的小Demo

v-for渲染 v-for是Vue中常用的列表渲染方法，可以將一個列表渲染為一系列的HTML元素，也可以用來遍歷物件內的k-v對。另外關於模板元素渲染在官方文件上見這裡。 index.html <!DOCTYPE html> <html lang="en"

【Vue.js學習筆記】9：使用npm搭建Vue-CLI腳手架並建立Vue專案

在第一篇的時候確實可以建立，這次跟著視訊搭建一次，比較一下和上次的區別，更正一下上次的錯誤操作，加深理解。重新搭建Vue-CLI腳手架在Node.js的安裝目錄下，刪除node_cache/和node_global下的所有內容，即讓Node處於剛剛安裝完成的狀態，連cnpm也

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

【Vue.js學習筆記】6：動態繫結CSS樣式,條件渲染和v-show

動態繫結CSS樣式這部分涉及官方文件中的Class與Style繫結。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:

【Vue.js學習筆記】5：雙向資料繫結,計算屬性

雙向資料繫結雙向資料繫結往往會用到input、select、textarea等表單標籤上，因為總是涉及一個數據資料的地方和輸出資料的地方。當資料發生變化的時候，檢視也就發生變化，當檢視發生變化的時候，資料也會跟著同步變化。資料雙向繫結，一定是對於UI控制元件來說的，

【Vue.js學習筆記】4：事件修飾符,鍵盤事件,鍵值修飾符

事件修飾符在Vue的官方文件中給出了引入v-on:的事件修飾符的理念是，不希望在方法中去處理DOM細節。事件冒泡事件在事件源上發生，處理事件的方法並未繫結在該事件源上，事件就要向外或者向內傳播（propagation），也稱事件冒泡。在JS裡，可以用事件物件的stopP

【Vue.js學習筆記】3：資料繫結,事件繫結

資料繫結使用Vue時在Vue物件的el欄位中要指定一下根容器，這裡用id選擇器。這個例子同時學習了data和methods的基本用法。資料繫結（data-binding）可以將Vue物件中的data的值繫結到HTML標籤中的某些位置，則修改時只需要修改物件中相應data的值即

【Vue.js學習筆記】11：元件中CSS的作用域

樣式表最終的生成位置有兩個元件，一個是根元件App，一個是子元件Users。它們都有一個h2標籤，先只在根元件上寫CSS樣式。 App.vue <template> <div id="app"> <h2>父元件的h2標籤<

【SciKit-Learn學習筆記】7：PCA結合SVM做AT&T資料集人物影象分類

學習《scikit-learn機器學習》時的一些實踐。原理見PCA及繪製降維與恢復示意圖。 sklearn的PCA sklearn中包裝的PCA也是不帶有歸一化和縮放等預處理操作的，可以用MinMaxScaler()實現並裝在Pipeline裡封裝起來。 from

【FLA學習筆記】7：基於Opterator Precedence(算符優先)的LL(1)語法分析

簡述課本第四章的遞迴下降和表驅動都是自頂向下的，即通過推導得到能夠完全匹配輸入串的推導式。第五章的優先分析法和第六章的LR分析是自底向上的(規約得到開始符)。第五章的簡單優先分析法是規範規約(左規約)，而算符優先分析法不是規範規約，並且只考慮終結符之

【Spring學習筆記】7：裝配bean的三種方式(自動裝配,JavaConfig,XML),配置匯入

跟著《Spring實戰》徹底系統地學習一下Spring。對Spring的新認識 Spring的關鍵基於POJO的輕量級和最小侵入性程式設計。通過DI和麵向介面實現鬆耦合。基於切面和慣例進行宣告式程式設計。通過切面和模板減少樣板式程式碼。所

【SciKit-Learn學習筆記】5：核SVM分類和預測乳腺癌資料集

學習《scikit-learn機器學習》時的一些實踐。常用引數引數C SVM分類器svm.SVC()中的引數C即SVM所優化的目標函式 a

【SciKit-Learn學習筆記】8：k-均值演算法做文字聚類,聚類演算法效能評估

學習《scikit-learn機器學習》時的一些實踐。原理見K-means和K-means++的演算法原理及sklearn庫中引數解釋、選擇。 sklearn中的KMeans from sklearn.datasets import make_blobs from m

【SciKit-Learn學習筆記】6：樸素貝葉斯做文件分類並繪製混淆矩陣

學習《scikit-learn機器學習》時的一些實踐。條件獨立樸素即指的是條件獨立假設，假設n個特徵之間不相關，則可據聯合概率的條件展開式： p

【SciKit-Learn學習筆記】4：決策樹擬合泰坦尼克號資料集並提交到Kaggle

學習《scikit-learn機器學習》時的一些實踐。決策樹擬合泰坦尼克號資料集這裡用繪製引數-score曲線的方式去直觀看出模型引數對模型得分的影響，作者使用了GridSearchCV來自動做k-fold交叉驗證，並且能在多組模型引數中找到最優的一組和最優值（用平均s

【SciKit-Learn學習筆記】3：線性迴歸測算波士頓房價,Logistic迴歸預測乳腺癌

學習《scikit-learn機器學習》時的一些實踐。線性迴歸這部分和第一篇筆記"繪製隨機波動樣本的學習曲線 "部分基本類似。線性迴歸裡可以加入多項式特徵，以對模型做增強。線性迴歸增加多項式特徵,擬合sin函式 import numpy as np impor

【SciKit-Learn學習筆記】2：kNN分類/迴歸,在糖尿病資料集上的表現

學習《scikit-learn機器學習》時的一些實踐。 kNN分類在三個點周圍生成聚類樣本，然後做的kNN分類。這種把標準差取得好（不要太小），得到的就不一定是線性可分的資料了。比如圖上右側有個玫紅點和藍點交錯。 from sklearn.datasets.sa

【SciKit-Learn學習筆記】1：SVM預測digits資料集,繪製隨機波動樣本的學習曲線

學習《scikit-learn機器學習》時的一些實踐。 SVM預測digits資料集 sklearn裡的各種模型物件統一了介面，fit()做訓練，predit()做預測，用score()獲得對模型測試結果的打分。這裡的打分不是acc，應該是決定係數。檢視資料形式

【SQL Server學習筆記】5：使用INSERT語句插入資料

使用SQL語句的意義是，要開發的DBAS應用程式不能像人一樣通過SSMS工具來操作資料，SQL語句是應用程式和資料庫通訊的橋樑。而且相比手動圖形化操作，SQL語句更加方便和強大。 SQL(結構化查詢語言)的組成 ①DML(資料操作語言) 插入、刪除和修

【Node.js學習筆記】-00 Node.js簡介

1.什麼是Node.js?Node.js不是JS應用，不是語言，也不是框架，只是JS的執行環境事件驅動，非阻塞I/O，簡單說就是每個函式都是非同步的，Node.js內部隱藏了非阻塞I/O的具體細節，使得我們可以輕鬆編寫高效能的WEB應用，所以它是輕量且高效的使用npm作為包管

【Vue.js學習筆記】7：v-for渲染,Vue的小Demo

v-for渲染

index.html

app8.js

執行結果

Vue的小Demo

index.html

app9.js

style3.css

執行結果

相關推薦