本文為博主原創，未經允許不得轉載：
<!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script> </head> <body> <div id="app" > <!--條件渲染，，用v-if指令會隱藏點dom元素，在瀏覽器控制台看不到未顯示的dom元素--> <p v-if="items>10">{{items}}個有現貨</p> <p v-else-if="items>1">所剩不多了，快點買吧</p> <p v-else>沒有庫存了，請耐心等待</p> <!-- 在HTML5中<template></template>標簽不占用dom位置， 不會渲染到dom節點里面，在vue中，經常做條件判斷的標簽 --> <template v-if="items>50"> <p> 注意事項</p> <p>因為剩余很多，現在買打8折哦！！！</p> </template> <!--dom元素在瀏覽器控制台是通過display：none來控制的 帶有 v-show 的元素始終會被渲染並保留在 DOM 中。 v-show 只是簡單地切換元素的 CSS 屬性 display。 --> <p v-show="Ninja"> I am hide</p> <p v-show="!Ninja"> I am here</p> <button v-on:click="Ninja = !Ninja">Ninja skills</button> </div> <script> //vue指令語法 v-指令名字+:+指令的參數=指令的表達式 var vm = new Vue({ el:"#app", data:{ items:52, Ninja:true } }) </script> </body> </html>
在瀏覽器端加載測試的效果如圖所示：
