From 6d362dc3eb4e5fde1af9ecfa55a31eb6fd3c3fd2 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sun, 30 Dec 2018 11:20:38 +0800
Subject: [PATCH] [improvement] Template: use v-text instead of mustache
 (#2404)

---
 packages/actionsheet/index.vue                | 10 +--
 packages/address-edit/Detail.vue              |  5 +-
 packages/address-edit/index.vue               | 10 ++-
 .../test/__snapshots__/demo.spec.js.snap      | 14 +---
 .../test/__snapshots__/index.spec.js.snap     | 24 ++-----
 packages/address-list/Item.vue                |  5 +-
 packages/address-list/index.vue               |  5 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 .../area/test/__snapshots__/demo.spec.js.snap | 24 ++-----
 .../test/__snapshots__/index.spec.js.snap     | 64 +++++--------------
 .../test/__snapshots__/demo.spec.js.snap      | 12 +---
 packages/card/index.vue                       | 10 ++-
 .../card/test/__snapshots__/demo.spec.js.snap | 16 ++---
 packages/circle/index.vue                     |  5 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/contact-edit/index.vue               | 14 ++--
 packages/coupon-list/Item.vue                 | 11 ++--
 packages/coupon-list/index.vue                |  4 +-
 packages/dialog/Dialog.vue                    | 14 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  6 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/info/index.vue                       |  5 +-
 packages/list/index.vue                       | 10 +--
 packages/notify/Notify.vue                    |  5 +-
 .../test/__snapshots__/index.spec.js.snap     | 30 ++-------
 packages/pagination/index.vue                 | 15 ++---
 .../test/__snapshots__/demo.spec.js.snap      | 60 +++++------------
 packages/password-input/index.vue             |  2 +-
 packages/picker/index.vue                     | 10 ++-
 .../test/__snapshots__/demo.spec.js.snap      |  8 +--
 packages/progress/index.vue                   |  5 +-
 .../test/__snapshots__/demo.spec.js.snap      | 20 ++----
 .../test/__snapshots__/index.spec.js.snap     |  6 +-
 packages/pull-refresh/index.vue               | 12 +++-
 packages/search/index.vue                     |  5 +-
 packages/sku/Sku.vue                          |  6 +-
 packages/sku/components/SkuHeader.vue         |  5 +-
 packages/sku/components/SkuRowItem.vue        |  5 +-
 packages/sku/components/SkuStepper.vue        | 10 ++-
 packages/submit-bar/index.vue                 |  7 +-
 .../test/__snapshots__/demo.spec.js.snap      | 12 +---
 .../test/__snapshots__/index.spec.js.snap     |  4 +-
 .../tab/test/__snapshots__/index.spec.js.snap | 60 +++++------------
 .../test/__snapshots__/demo.spec.js.snap      | 12 +---
 packages/tabs/index.vue                       |  5 +-
 packages/toast/Toast.vue                      | 12 ++--
 packages/tree-select/index.vue                |  5 +-
 .../test/__snapshots__/demo.spec.js.snap      | 16 ++---
 48 files changed, 207 insertions(+), 410 deletions(-)

diff --git a/packages/actionsheet/index.vue b/packages/actionsheet/index.vue
index 71d6644d7..6bcac06f8 100644
--- a/packages/actionsheet/index.vue
+++ b/packages/actionsheet/index.vue
@@ -30,13 +30,15 @@
           @click.stop="onSelect(item)"
         >
           <template v-if="!item.loading">
-            <span :class="b('name')">{{ item.name }}</span>
+            <span
+              :class="b('name')"
+              v-text="item.name"
+            />
             <span
               v-if="item.subname"
+              v-text="item.subname"
               :class="b('subname')"
-            >
-              {{ item.subname }}
-            </span>
+            />
           </template>
           <loading
             v-else
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index c14a86f23..e4519bc4b 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -15,12 +15,11 @@
     >
       <span
         v-if="showIcon && isAndroid"
+        v-text="$t('complete')"
         slot="icon"
         :class="b('finish')"
         @click="$refs.field.blur()"
-      >
-        {{ $t('complete') }}
-      </span>
+      />
     </field>
     <cell
       v-for="express in searchList"
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 7a803773f..e9568ad3b 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -66,18 +66,16 @@
         block
         :loading="isSaving"
         type="danger"
+        :text="saveButtonText || $t('save')"
         @click="onSave"
-      >
-        {{ saveButtonText || $t('save') }}
-      </van-button>
+      />
       <van-button
         v-if="showDelete"
         block
         :loading="isDeleting"
+        :text="deleteButtonText || $t('delete')"
         @click="onDelete"
-      >
-        {{ deleteButtonText || $t('delete') }}
-      </van-button>
+      />
     </div>
 
     <popup
diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index b19296593..e3799c7da 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -100,21 +100,13 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
-      保存
-    </span></button> <button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">
-      删除
-    </span></button></div>
+      <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button> <button class="van-button van-button--default van-button--normal van-button--block"><span class="van-button__text">删除</span></button></div>
       <div class="van-popup van-popup--bottom" style="display:none;">
         <div class="van-picker van-area">
           <div class="van-hairline--top-bottom van-picker__toolbar">
-            <div class="van-picker__cancel">
-              取消
-            </div>
+            <div class="van-picker__cancel">取消</div>
             <!---->
-            <div class="van-picker__confirm">
-              确认
-            </div>
+            <div class="van-picker__confirm">确认</div>
           </div>
           <!---->
           <div class="van-picker__columns" style="height:220px;">
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index ea6b71c55..36ba1adab 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -71,21 +71,15 @@ exports[`create a AddressEdit 1`] = `
   </div>
   <!---->
   <!---->
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
-      保存
-    </span></button>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
     <!---->
   </div>
   <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <!---->
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <div class="van-picker__loading">
         <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
@@ -205,21 +199,15 @@ exports[`create a AddressEdit with props 1`] = `
     </div>
     <!---->
   </div>
-  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
-      保存
-    </span></button>
+  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
     <!---->
   </div>
   <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <!---->
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
diff --git a/packages/address-list/Item.vue b/packages/address-list/Item.vue
index f5d2b2b6b..7aa65a5ac 100644
--- a/packages/address-list/Item.vue
+++ b/packages/address-list/Item.vue
@@ -6,7 +6,10 @@
   >
     <radio :name="data.id">
       <div :class="b('name')">{{ data.name }}，{{ data.tel }}</div>
-      <div :class="b('address')">{{ data.address }}</div>
+      <div
+        v-text="data.address"
+        :class="b('address')"
+      />
     </radio>
     <icon
       slot="right-icon"
diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue
index e933e5078..1880a29b5 100644
--- a/packages/address-list/index.vue
+++ b/packages/address-list/index.vue
@@ -18,10 +18,9 @@
     </radio-group>
     <div
       v-if="disabledText"
+      v-text="disabledText"
       :class="b('disabled-text')"
-    >
-      {{ disabledText }}
-    </div>
+    />
     <cell-group v-if="disabledList.length">
       <address-item
         v-for="(item, index) in disabledList"
diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
index c4a91e7ee..e783d4fb9 100644
--- a/packages/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -26,9 +26,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-address-list__disabled-text">
-        以下地址超出配送范围
-      </div>
+      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
       <div class="van-cell-group van-hairline--top-bottom">
         <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
           <!---->
diff --git a/packages/area/test/__snapshots__/demo.spec.js.snap b/packages/area/test/__snapshots__/demo.spec.js.snap
index 7cac85d83..704de232b 100644
--- a/packages/area/test/__snapshots__/demo.spec.js.snap
+++ b/packages/area/test/__snapshots__/demo.spec.js.snap
@@ -5,13 +5,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <!---->
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -31,13 +27,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <!---->
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -57,13 +49,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
diff --git a/packages/area/test/__snapshots__/index.spec.js.snap b/packages/area/test/__snapshots__/index.spec.js.snap
index c93814987..14b78bbf0 100644
--- a/packages/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/area/test/__snapshots__/index.spec.js.snap
@@ -3,13 +3,9 @@
 exports[`change option 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -30,13 +26,9 @@ exports[`change option 1`] = `
 exports[`change option 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -66,13 +58,9 @@ exports[`change option 2`] = `
 exports[`change option 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -102,13 +90,9 @@ exports[`change option 3`] = `
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -137,13 +121,9 @@ exports[`reset method 1`] = `
 exports[`reset method 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -173,13 +153,9 @@ exports[`reset method 2`] = `
 exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -200,13 +176,9 @@ exports[`watch areaList & code 1`] = `
 exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -236,13 +208,9 @@ exports[`watch areaList & code 2`] = `
 exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">
-      取消
-    </div>
+    <div class="van-picker__cancel">取消</div>
     <!---->
-    <div class="van-picker__confirm">
-      确认
-    </div>
+    <div class="van-picker__confirm">确认</div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
diff --git a/packages/badge/test/__snapshots__/demo.spec.js.snap b/packages/badge/test/__snapshots__/demo.spec.js.snap
index aae1a2022..6e5a2717d 100644
--- a/packages/badge/test/__snapshots__/demo.spec.js.snap
+++ b/packages/badge/test/__snapshots__/demo.spec.js.snap
@@ -11,23 +11,17 @@ exports[`renders demo correctly 1`] = `
       </a> <a class="van-badge van-hairline">
         <div class="van-badge__text">
           标签名称
-          <div class="van-info van-badge__info">
-            8
-          </div>
+          <div class="van-info van-badge__info">8</div>
         </div>
       </a> <a class="van-badge van-hairline">
         <div class="van-badge__text">
           标签名称
-          <div class="van-info van-badge__info">
-            99
-          </div>
+          <div class="van-info van-badge__info">99</div>
         </div>
       </a> <a class="van-badge van-hairline">
         <div class="van-badge__text">
           标签名称
-          <div class="van-info van-badge__info">
-            99+
-          </div>
+          <div class="van-info van-badge__info">99+</div>
         </div>
       </a></div>
   </div>
diff --git a/packages/card/index.vue b/packages/card/index.vue
index 63a9e9186..aeb3379a0 100644
--- a/packages/card/index.vue
+++ b/packages/card/index.vue
@@ -31,18 +31,16 @@
       <slot name="title">
         <div
           v-if="title"
+          v-text="title"
           :class="b('title')"
-        >
-          {{ title }}
-        </div>
+        />
       </slot>
       <slot name="desc">
         <div
           v-if="desc"
+          v-text="desc"
           :class="[b('desc'), 'van-ellipsis']"
-        >
-          {{ desc }}
-        </div>
+        />
       </slot>
       <slot name="tags" />
 
diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap
index a3143cf09..06eb1c437 100644
--- a/packages/card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/card/test/__snapshots__/demo.spec.js.snap
@@ -6,12 +6,8 @@ exports[`renders demo correctly 1`] = `
     <div class="van-card"><a class="van-card__thumb"><img src="//img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg" class="van-card__img">
         <!----></a>
       <div class="van-card__content">
-        <div class="van-card__title">
-          2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
-        </div>
-        <div class="van-card__desc van-ellipsis">
-          描述信息
-        </div>
+        <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
+        <div class="van-card__desc van-ellipsis">描述信息</div>
         <div class="van-card__bottom">
           <div class="van-card__price">
             ¥ 2.00
@@ -30,12 +26,8 @@ exports[`renders demo correctly 1`] = `
       标签
     </span></a>
       <div class="van-card__content">
-        <div class="van-card__title">
-          2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
-        </div>
-        <div class="van-card__desc van-ellipsis">
-          描述信息
-        </div>
+        <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
+        <div class="van-card__desc van-ellipsis">描述信息</div>
         <div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">
           标签1
         </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color:#f44;">
diff --git a/packages/circle/index.vue b/packages/circle/index.vue
index 4afe130a0..ef0943e07 100644
--- a/packages/circle/index.vue
+++ b/packages/circle/index.vue
@@ -16,7 +16,10 @@
       />
     </svg>
     <slot>
-      <div :class="b('text')">{{ text }}</div>
+      <div
+        v-text="text"
+        :class="b('text')"
+      />
     </slot>
   </div>
 </template>
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index 0a21098c9..1bdf49c96 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -62,9 +62,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
           </div>
         </div>
-        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
-      保存
-    </span></button>
+        <div class="van-contact-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
           <!---->
         </div>
       </div>
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index 3221acf95..e5c597013 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -21,20 +21,18 @@
     <div :class="b('buttons')">
       <van-button
         block
+        type="danger"
+        :text="$t('save')"
         :loading="isSaving"
         @click="onSave"
-        type="danger"
-      >
-        {{ $t('save') }}
-      </van-button>
+      />
       <van-button
+        v-if="isEdit"
         block
+        :text="$t('delete')"
         :loading="isDeleting"
         @click="onDelete"
-        v-if="isEdit"
-      >
-        {{ $t('delete') }}
-      </van-button>
+      />
     </div>
   </div>
 </template>
diff --git a/packages/coupon-list/Item.vue b/packages/coupon-list/Item.vue
index f28a06f39..183b07078 100644
--- a/packages/coupon-list/Item.vue
+++ b/packages/coupon-list/Item.vue
@@ -3,11 +3,11 @@
     <div :class="b('content')">
       <div :class="b('head')">
         <h2 v-html="faceAmount" />
-        <p>{{ conditionMessage }}</p>
+        <p v-text="conditionMessage" />
       </div>
       <div :class="b('body')">
-        <h2>{{ data.name }}</h2>
-        <p>{{ validPeriod }}</p>
+        <h2 v-text="data.name" />
+        <p v-text="validPeriod" />
         <checkbox
           v-if="chosen"
           :value="true"
@@ -17,10 +17,9 @@
     </div>
     <p
       v-if="disabled && data.reason"
+      v-text="data.reason"
       :class="b('reason')"
-    >
-      {{ data.reason }}
-    </p>
+    />
   </div>
 </template>
 
diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue
index 9f6b769d0..9402ab56d 100644
--- a/packages/coupon-list/index.vue
+++ b/packages/coupon-list/index.vue
@@ -44,7 +44,7 @@
             :class="b('empty')"
           >
             <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png">
-            <p>{{ $t('empty') }}</p>
+            <p v-text="$t('empty')" />
           </div>
         </div>
       </tab>
@@ -65,7 +65,7 @@
             :class="b('empty')"
           >
             <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png">
-            <p>{{ $t('empty') }}</p>
+            <p v-text="$t('empty')" />
           </div>
         </div>
       </tab>
diff --git a/packages/dialog/Dialog.vue b/packages/dialog/Dialog.vue
index 0b6b346e6..b3dbe6061 100644
--- a/packages/dialog/Dialog.vue
+++ b/packages/dialog/Dialog.vue
@@ -27,22 +27,20 @@
       >
         <van-button
           v-show="showCancelButton"
-          :loading="loading.cancel"
           size="large"
           :class="b('cancel')"
+          :loading="loading.cancel"
+          :text="cancelButtonText || $t('cancel')"
           @click="handleAction('cancel')"
-        >
-          {{ cancelButtonText || $t('cancel') }}
-        </van-button>
+        />
         <van-button
           v-show="showConfirmButton"
           size="large"
-          :loading="loading.confirm"
           :class="[b('confirm'), { 'van-hairline--left': showCancelButton && showConfirmButton }]"
+          :loading="loading.confirm"
+          :text="confirmButtonText || $t('confirm')"
           @click="handleAction('confirm')"
-        >
-          {{ confirmButtonText || $t('confirm') }}
-        </van-button>
+        />
       </div>
     </div>
   </transition>
diff --git a/packages/dialog/test/__snapshots__/demo.spec.js.snap b/packages/dialog/test/__snapshots__/demo.spec.js.snap
index 3bf2fb962..9e8ac945e 100644
--- a/packages/dialog/test/__snapshots__/demo.spec.js.snap
+++ b/packages/dialog/test/__snapshots__/demo.spec.js.snap
@@ -47,11 +47,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
       </div>
-      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">
-        取消
-      </span></button> <button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">
-        消息确认
-      </span></button></div>
+      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel"><span class="van-button__text">取消</span></button> <button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left"><span class="van-button__text">消息确认</span></button></div>
     </div>
   </div>
 </div>
diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
index 958e914ae..9c6da4705 100644
--- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -19,9 +19,7 @@ exports[`renders demo correctly 1`] = `
           <!----></i> 客服</div>
       <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
-          <div class="van-info">
-            5
-          </div>
+          <div class="van-info">5</div>
         </i> 购物车</div>
       <div class="van-hairline van-goods-action-mini-btn"><i class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
           <!---->
diff --git a/packages/info/index.vue b/packages/info/index.vue
index 7d7c47964..205d697d3 100644
--- a/packages/info/index.vue
+++ b/packages/info/index.vue
@@ -1,10 +1,9 @@
 <template>
   <div
     v-if="isDef(info)"
+    v-text="info"
     :class="b()"
-  >
-    {{ info }}
-  </div>
+  />
 </template>
 
 <script>
diff --git a/packages/list/index.vue b/packages/list/index.vue
index d7940466b..2e67b1d67 100644
--- a/packages/list/index.vue
+++ b/packages/list/index.vue
@@ -7,15 +7,17 @@
     >
       <slot name="loading">
         <loading :class="b('loading-icon')" />
-        <span :class="b('loading-text')">{{ loadingText || $t('loadingTip') }}</span>
+        <span
+          v-text="loadingText || $t('loadingTip')"
+          :class="b('loading-text')"
+        />
       </slot>
     </div>
     <div
       v-if="finished && finishedText"
+      v-text="finishedText"
       :class="b('finished-text')"
-    >
-      {{ finishedText }}
-    </div>
+    />
   </div>
 </template>
 
diff --git a/packages/notify/Notify.vue b/packages/notify/Notify.vue
index e9633a31d..fcffb6336 100644
--- a/packages/notify/Notify.vue
+++ b/packages/notify/Notify.vue
@@ -2,11 +2,10 @@
   <transition name="van-slide-down">
     <div
       v-show="value"
+      v-text="message"
       :class="b()"
       :style="style"
-    >
-      {{ message }}
-    </div>
+    />
   </transition>
 </template>
 
diff --git a/packages/notify/test/__snapshots__/index.spec.js.snap b/packages/notify/test/__snapshots__/index.spec.js.snap
index 0637b69c0..e79130da7 100644
--- a/packages/notify/test/__snapshots__/index.spec.js.snap
+++ b/packages/notify/test/__snapshots__/index.spec.js.snap
@@ -1,31 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`create a notify 1`] = `
-<div class="van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2000;" name="van-slide-down">
-  test
-</div>
-`;
+exports[`create a notify 1`] = `<div class="van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2000;" name="van-slide-down">test</div>`;
 
-exports[`notify disappear 1`] = `
-<div class="van-notify" style="color: red; z-index: 2000; background: blue;" name="van-slide-down">
-  test
-</div>
-`;
+exports[`notify disappear 1`] = `<div class="van-notify" style="color: red; z-index: 2000; background: blue;" name="van-slide-down">test</div>`;
 
-exports[`notify disappear 2`] = `
-<div class="van-notify" style="color: red; z-index: 2000; background: blue; display: none;" name="van-slide-down">
-  test
-</div>
-`;
+exports[`notify disappear 2`] = `<div class="van-notify" style="color: red; z-index: 2000; background: blue; display: none;" name="van-slide-down">test</div>`;
 
-exports[`notify disappear 3`] = `
-<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68);" name="van-slide-down">
-  text2
-</div>
-`;
+exports[`notify disappear 3`] = `<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68);" name="van-slide-down">text2</div>`;
 
-exports[`notify disappear 4`] = `
-<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68); display: none;" name="van-slide-down">
-  text2
-</div>
-`;
+exports[`notify disappear 4`] = `<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68); display: none;" name="van-slide-down">text2</div>`;
diff --git a/packages/pagination/index.vue b/packages/pagination/index.vue
index f9caebc4a..f5bc86d05 100644
--- a/packages/pagination/index.vue
+++ b/packages/pagination/index.vue
@@ -1,20 +1,18 @@
 <template>
   <ul :class="b({ simple: !isMultiMode })">
     <li
+      v-text="prevText || $t('prev')"
       class="van-hairline"
       :class="[b('item', { disabled: value === 1 }), b('prev')]"
       @click="selectPage(value - 1)"
-    >
-      {{ prevText || $t('prev') }}
-    </li>
+    />
     <li
       v-for="page in pages"
+      v-text="page.text"
       class="van-hairline"
       :class="[b('item', { active: page.active }), b('page')]"
       @click="selectPage(page.number)"
-    >
-      {{ page.text }}
-    </li>
+    />
     <li
       v-if="!isMultiMode"
       :class="b('page-desc')"
@@ -22,12 +20,11 @@
       <slot name="pageDesc">{{ pageDesc }}</slot>
     </li>
     <li
+      v-text="nextText || $t('next')"
       class="van-hairline"
       :class="[b('item', { disabled: value === computedPageCount }), b('next')]"
       @click="selectPage(value + 1)"
-    >
-      {{ nextText || $t('next') }}
-    </li>
+    />
   </ul>
 </template>
 
diff --git a/packages/pagination/test/__snapshots__/demo.spec.js.snap b/packages/pagination/test/__snapshots__/demo.spec.js.snap
index 646dce96a..11518affa 100644
--- a/packages/pagination/test/__snapshots__/demo.spec.js.snap
+++ b/packages/pagination/test/__snapshots__/demo.spec.js.snap
@@ -4,62 +4,32 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <ul class="van-pagination">
-      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">
-        上一页
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__item--active van-pagination__page">
-        1
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        2
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        3
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        4
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        5
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">上一页</li>
+      <li class="van-hairline van-pagination__item van-pagination__item--active van-pagination__page">1</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">2</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">3</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">4</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">5</li>
       <!---->
-      <li class="van-hairline van-pagination__item van-pagination__next">
-        下一页
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__next">下一页</li>
     </ul>
   </div>
   <div>
     <ul size="small" class="van-pagination van-pagination--simple">
-      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">
-        上一页
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">上一页</li>
       <li class="van-pagination__page-desc">1/12</li>
-      <li class="van-hairline van-pagination__item van-pagination__next">
-        下一页
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__next">下一页</li>
     </ul>
   </div>
   <div>
     <ul class="van-pagination">
-      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">
-        上一页
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__item--active van-pagination__page">
-        1
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        2
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        3
-      </li>
-      <li class="van-hairline van-pagination__item van-pagination__page">
-        ...
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">上一页</li>
+      <li class="van-hairline van-pagination__item van-pagination__item--active van-pagination__page">1</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">2</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">3</li>
+      <li class="van-hairline van-pagination__item van-pagination__page">...</li>
       <!---->
-      <li class="van-hairline van-pagination__item van-pagination__next">
-        下一页
-      </li>
+      <li class="van-hairline van-pagination__item van-pagination__next">下一页</li>
     </ul>
   </div>
 </div>
diff --git a/packages/password-input/index.vue b/packages/password-input/index.vue
index e8e439532..84792db06 100644
--- a/packages/password-input/index.vue
+++ b/packages/password-input/index.vue
@@ -9,7 +9,7 @@
         v-for="visibility in points"
         class="van-hairline"
       >
-        <i :style="`visibility: ${visibility}`" />
+        <i :style="{ visibility } " />
       </li>
     </ul>
     <div
diff --git a/packages/picker/index.vue b/packages/picker/index.vue
index 4344e3d5d..2e953e7f7 100644
--- a/packages/picker/index.vue
+++ b/packages/picker/index.vue
@@ -7,11 +7,10 @@
     >
       <slot>
         <div
+          v-text="cancelButtonText || $t('cancel')"
           :class="b('cancel')"
           @click="emit('cancel')"
-        >
-          {{ cancelButtonText || $t('cancel') }}
-        </div>
+        />
         <div
           v-if="title"
           v-text="title"
@@ -19,11 +18,10 @@
           class="van-ellipsis"
         />
         <div
+          v-text="confirmButtonText || $t('confirm')"
           :class="b('confirm')"
           @click="emit('confirm')"
-        >
-          {{ confirmButtonText || $t('confirm') }}
-        </div>
+        />
       </slot>
     </div>
     <div
diff --git a/packages/picker/test/__snapshots__/demo.spec.js.snap b/packages/picker/test/__snapshots__/demo.spec.js.snap
index 6ecafd43c..7a1090d57 100644
--- a/packages/picker/test/__snapshots__/demo.spec.js.snap
+++ b/packages/picker/test/__snapshots__/demo.spec.js.snap
@@ -39,13 +39,9 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">
-          取消
-        </div>
+        <div class="van-picker__cancel">取消</div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">
-          确认
-        </div>
+        <div class="van-picker__confirm">确认</div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
diff --git a/packages/progress/index.vue b/packages/progress/index.vue
index 07024c535..dd8d0c140 100644
--- a/packages/progress/index.vue
+++ b/packages/progress/index.vue
@@ -6,12 +6,11 @@
     >
       <span
         v-if="showPivot && text"
+        v-text="text"
         ref="pivot"
         :style="pivotStyle"
         :class="b('pivot')"
-      >
-        {{ text }}
-      </span>
+      />
     </span>
   </div>
 </template>
diff --git a/packages/progress/test/__snapshots__/demo.spec.js.snap b/packages/progress/test/__snapshots__/demo.spec.js.snap
index 0906946c2..5260086da 100644
--- a/packages/progress/test/__snapshots__/demo.spec.js.snap
+++ b/packages/progress/test/__snapshots__/demo.spec.js.snap
@@ -3,25 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">
-      50%
-    </span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">
-      50%
-    </span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span></div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">
-      橙色
-    </span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">
-      红色
-    </span></span></div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">
-      紫色
-    </span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span></div>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span></div>
   </div>
 </div>
 `;
diff --git a/packages/progress/test/__snapshots__/index.spec.js.snap b/packages/progress/test/__snapshots__/index.spec.js.snap
index 077f43272..2b20d1053 100644
--- a/packages/progress/test/__snapshots__/index.spec.js.snap
+++ b/packages/progress/test/__snapshots__/index.spec.js.snap
@@ -2,8 +2,4 @@
 
 exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
 
-exports[`calc width 2`] = `
-<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">
-      test
-    </span></span></div>
-`;
+exports[`calc width 2`] = `<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span></div>`;
diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.vue
index 9ad752c00..bfeadcc28 100644
--- a/packages/pull-refresh/index.vue
+++ b/packages/pull-refresh/index.vue
@@ -17,13 +17,19 @@
           v-if="status === 'pulling'"
           name="pulling"
         >
-          <span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
+          <span
+            v-text="pullingText || $t('pulling')"
+            :class="b('text')"
+          />
         </slot>
         <slot
           v-if="status === 'loosing'"
           name="loosing"
         >
-          <span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
+          <span
+            v-text="loosingText || $t('loosing')"
+            :class="b('text')"
+          />
         </slot>
         <slot
           v-if="status === 'loading'"
@@ -31,7 +37,7 @@
         >
           <div :class="b('loading')">
             <loading />
-            <span>{{ loadingText || $t('loadingTip') }}</span>
+            <span v-text="loadingText || $t('loadingTip')" />
           </div>
         </slot>
       </div>
diff --git a/packages/search/index.vue b/packages/search/index.vue
index 8a6e562ba..88e3b978e 100644
--- a/packages/search/index.vue
+++ b/packages/search/index.vue
@@ -22,7 +22,10 @@
       :class="b('action')"
     >
       <slot name="action">
-        <div @click="onBack">{{ $t('cancel') }}</div>
+        <div
+          v-text="$t('cancel')"
+          @click="onBack"
+        />
       </slot>
     </div>
   </div>
diff --git a/packages/sku/Sku.vue b/packages/sku/Sku.vue
index d66b3f6f9..52fdd0838 100644
--- a/packages/sku/Sku.vue
+++ b/packages/sku/Sku.vue
@@ -26,7 +26,11 @@
           :selected-sku-comb="selectedSkuComb"
         >
           <div class="van-sku__goods-price">
-            <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
+            <span class="van-sku__price-symbol">￥</span>
+            <span
+              v-text="price"
+              class="van-sku__price-num"
+            />
           </div>
         </slot>
       </sku-header>
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
index abb1af1f5..98eecf277 100644
--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -10,7 +10,10 @@
       <img :src="goodsImg">
     </div>
     <div :class="b('goods-info')">
-      <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
+      <div
+        v-text="goods.title"
+        class="van-sku__goods-name van-ellipsis"
+      />
       <!-- price display area -->
       <slot />
       <icon
diff --git a/packages/sku/components/SkuRowItem.vue b/packages/sku/components/SkuRowItem.vue
index ec7a29dde..ac68dd206 100644
--- a/packages/sku/components/SkuRowItem.vue
+++ b/packages/sku/components/SkuRowItem.vue
@@ -1,14 +1,13 @@
 <template>
   <span
+    v-text="skuValue.name"
     class="van-sku-row__item"
     :class="{
       'van-sku-row__item--active': isChoosed,
       'van-sku-row__item--disabled': !isChoosable
     }"
     @click="onSelect"
-  >
-    {{ skuValue.name }}
-  </span>
+  />
 </template>
 
 <script>
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue
index dd9ccd337..8497768fc 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@@ -14,16 +14,14 @@
     </div>
     <div
       v-if="!hideStock"
+      v-text="stockText"
       class="van-sku__stock"
-    >
-      {{ stockText }}
-    </div>
+    />
     <div
       v-if="!hideQuotaText && quotaText"
+      v-text="quotaText"
       class="van-sku__quota"
-    >
-      {{ quotaText }}
-    </div>
+    />
   </div>
 </template>
 
diff --git a/packages/submit-bar/index.vue b/packages/submit-bar/index.vue
index 25707cd21..9088d19c7 100644
--- a/packages/submit-bar/index.vue
+++ b/packages/submit-bar/index.vue
@@ -11,7 +11,7 @@
       <slot />
       <div :class="b('text')">
         <template v-if="hasPrice">
-          <span>{{ label || $t('label') }}</span>
+          <span v-text="label || $t('label')" />
           <span :class="b('price')">{{ currency }} {{ price | format }}</span>
         </template>
       </div>
@@ -21,10 +21,9 @@
         :type="buttonType"
         :disabled="disabled"
         :loading="loading"
+        :text="loading ? '' : buttonText"
         @click="$emit('submit')"
-      >
-        {{ loading ? '' : buttonText }}
-      </van-button>
+      />
     </div>
   </div>
 </template>
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 560a87a6f..6a76381ee 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -6,9 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-submit-bar">
       <!---->
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">
-      提交订单
-    </span></button>
+        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
@@ -17,9 +15,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__tip">
         你的收货地址不支持同城送, 我们已为你推荐快递</div>
       <div class="van-submit-bar__bar">
-        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text">
-      提交订单
-    </span></button>
+        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
@@ -47,9 +43,7 @@ exports[`renders demo correctly 1`] = `
               <!---->
               <!----></i></div> <span class="van-checkbox__label">全选</span>
         </div>
-        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">
-      提交订单
-    </span></button>
+        <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 30.50</span></div> <button class="van-button van-button--danger van-button--large van-button--square"><span class="van-button__text">提交订单</span></button>
       </div>
     </div>
   </div>
diff --git a/packages/submit-bar/test/__snapshots__/index.spec.js.snap b/packages/submit-bar/test/__snapshots__/index.spec.js.snap
index 4b9db7ecb..c437a2759 100644
--- a/packages/submit-bar/test/__snapshots__/index.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/index.spec.js.snap
@@ -4,9 +4,7 @@ exports[`submit 1`] = `
 <div class="van-submit-bar">
   <!---->
   <div class="van-submit-bar__bar">
-    <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 0.00</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text">
-
-    </span></button>
+    <div class="van-submit-bar__text"><span>合计：</span> <span class="van-submit-bar__price">¥ 0.00</span></div> <button disabled="disabled" class="van-button van-button--danger van-button--large van-button--square van-button--disabled van-button--unclickable"><span class="van-button__text"></span></button>
   </div>
 </div>
 `;
diff --git a/packages/tab/test/__snapshots__/index.spec.js.snap b/packages/tab/test/__snapshots__/index.spec.js.snap
index ca431e504..445dee728 100644
--- a/packages/tab/test/__snapshots__/index.spec.js.snap
+++ b/packages/tab/test/__snapshots__/index.spec.js.snap
@@ -29,15 +29,9 @@ exports[`change tabs data 2`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">
-          title1
-        </span></div>
-      <div class="van-tab"><span class="van-ellipsis">
-
-        </span></div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
+      <div class="van-tab"><span class="van-ellipsis"></span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -62,15 +56,11 @@ exports[`click to switch tab 1`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -93,15 +83,11 @@ exports[`click to switch tab 2`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab van-tab--active">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -124,15 +110,11 @@ exports[`swipe to switch tab 1`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -155,15 +137,11 @@ exports[`swipe to switch tab 2`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab van-tab--active">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -186,15 +164,11 @@ exports[`swipe to switch tab 3`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab van-tab--active">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
@@ -217,15 +191,11 @@ exports[`swipe to switch tab 4`] = `
   <div class="van-tabs__wrap van-hairline--top-bottom">
     <div class="van-tabs__nav van-tabs__nav--line" style="border-color: #f44;">
       <div class="van-tabs__line" style="background-color: rgb(255, 68, 68); width: 2px; transform: translateX(-1px);"></div>
-      <div class="van-tab van-tab--active"><span class="van-ellipsis">
-          title1
-        </span></div>
+      <div class="van-tab van-tab--active"><span class="van-ellipsis">title1</span></div>
       <div class="van-tab">
         <div><span>title2</span></div>
       </div>
-      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">
-          title3
-        </span></div>
+      <div class="van-tab van-tab--disabled"><span class="van-ellipsis">title3</span></div>
     </div>
   </div>
   <div class="van-tabs__content">
diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
index 1b17b4b1f..b1d770c4f 100644
--- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -26,9 +26,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
-          <div class="van-info">
-            5
-          </div>
+          <div class="van-info">5</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -38,9 +36,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
-          <div class="van-info">
-            20
-          </div>
+          <div class="van-info">20</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -52,9 +48,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">
-          <div class="van-info">
-            3
-          </div>
+          <div class="van-info">3</div>
         </div>
         <div class="van-tabbar-item__text"><span>自定义</span></div>
       </div>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index 646a67fbc..74cf10348 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -31,11 +31,10 @@
           @click="onClick(index)"
         >
           <span
+            v-text="tab.title"
             ref="title"
             :class="{ 'van-ellipsis': ellipsis }"
-          >
-            {{ tab.title }}
-          </span>
+          />
         </div>
       </div>
     </div>
diff --git a/packages/toast/Toast.vue b/packages/toast/Toast.vue
index 88c6ba468..3394b01e6 100644
--- a/packages/toast/Toast.vue
+++ b/packages/toast/Toast.vue
@@ -5,7 +5,12 @@
       :class="b([style, position])"
     >
       <!-- text only -->
-      <div v-if="style === 'text'">{{ message }}</div>
+      <div
+        v-if="style === 'text'"
+        v-text="message"
+      />
+
+      <!-- html only -->
       <div
         v-if="style === 'html'"
         v-html="message"
@@ -25,10 +30,9 @@
         />
         <div
           v-if="isDef(message)"
+          v-text="message"
           :class="b('text')"
-        >
-          {{ message }}
-        </div>
+        />
       </template>
     </div>
   </transition>
diff --git a/packages/tree-select/index.vue b/packages/tree-select/index.vue
index 541f7b054..1ad4ebca6 100644
--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@@ -6,12 +6,11 @@
     <div :class="b('nav')">
       <div
         v-for="(item, index) in items"
+        v-text="item.text"
         class="van-ellipsis"
         :class="b('nitem', { active: mainActiveIndex === index, disabled: item.disabled })"
         @click="onClickNav(item, index)"
-      >
-        {{ item.text }}
-      </div>
+      />
     </div>
     <div :class="b('content')">
       <div
diff --git a/packages/tree-select/test/__snapshots__/demo.spec.js.snap b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
index feb92214c..32b311cc9 100644
--- a/packages/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -5,18 +5,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tree-select" style="height:300px;">
       <div class="van-tree-select__nav">
-        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--active">
-          所有城市
-        </div>
-        <div class="van-ellipsis van-tree-select__nitem">
-          浙江
-        </div>
-        <div class="van-ellipsis van-tree-select__nitem">
-          江苏
-        </div>
-        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">
-          福建
-        </div>
+        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--active">所有城市</div>
+        <div class="van-ellipsis van-tree-select__nitem">浙江</div>
+        <div class="van-ellipsis van-tree-select__nitem">江苏</div>
+        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">福建</div>
       </div>
       <div class="van-tree-select__content">
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">