Update demos.

Author: tangbc

demos/common/Item.vue

@@ -2,9 +2,9 @@
 <div class="item" v-bind:style="itemStyle">
     <div class="index">#{{ index }}</div>
     <div class="card">
-        <div class="card-avatar">
-            {{ info.name.substr(0, 2) }}
-            <!-- <img class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR"> -->
+        <div class="card-avatar" v-bind:class="{'no-avatar': !avatar}">
+            <span v-if="!avatar">{{ info.name.substr(0, 2) }}</span>
+            <img v-else class="card-avatar-img" v-bind:src="info.avatar" alt="AVATAR">
         </div>
         <div class="card-info">
             <div class="card-info-item name">Name: {{ info.name }}</div>
@@ -16,6 +16,8 @@
 </template>
 
 <script>
+import { getQuery } from './util'
+
 export default {
     name: 'item',
 
@@ -29,6 +31,12 @@ export default {
         }
     },
 
+    data () {
+        return {
+            avatar: getQuery('avatar') !== null
+        }
+    },
+
     computed: {
         itemStyle () {
             return {
@@ -62,11 +70,15 @@ export default {
         &-avatar {
             width: 40px;
             height: 40px;
-            background: #ff6347;
+            background: #efefef;
+            color: #4169e1;
             border-radius: 50%;
             text-align: center;
             line-height: 40px;
-            color: #ffffff;
+            &.no-avatar {
+                background: #ff6347;
+                color: #ffffff;
+            }
             &-img {
                 display: block;
                 width: 100%;

demos/common/util.js

@@ -9,3 +9,11 @@ export const getRandomUser = () => {
         // avatar: `https://getavataaars.com/?hairColor=BrownDark&topType=LongHairStraight2`
     }
 }
+
+export const getQuery = (query) => {
+    try {
+        return new URLSearchParams(window.location.search).get(query)
+    } catch (e) {
+        return false
+    }
+}

demos/item-mode/App.vue

@@ -4,7 +4,7 @@
     <div class="container">
         <header>
             <h1>item-mode</h1>
-            <p>Use this mode can save a considerable amount of memory and performance.</p>
+            <p>Use vNode to build item list.</p>
         </header>
         <div class="main">
             <virtual-list class="list"

demos/item-mode/build.js

@@ -1,10 +1,10 @@
 <template>
 <div class="app">
-    <GithubCorner path="/frag-mode" />
+    <GithubCorner path="/vfor-mode" />
     <div class="container">
         <header>
-            <h1>frag-mode</h1>
-            <p></p>
+            <h1>vfor-mode</h1>
+            <p>Use v-for to build item list.</p>
         </header>
         <div class="main">
             <virtual-list class="list"
@@ -31,7 +31,7 @@ import { getRandomUser } from '../common/util'
 
 const remain = 6
 const itemSize = 80
-const itemCount = 1000 * 10
+const itemCount = 1000 * 100
 
 let itemList = []
 for (let idx = 0; idx < itemCount; idx++) {