輕鬆掌握純前端js框架---VUE

時間  2020-06-22
標籤 輕鬆 掌握 前端 框架 vue 欄目 JavaScript 简体版
原文   原文鏈接 
不管如今的你處於什麼狀態，是時候對本身說：不爲模糊不清的將來擔心，只爲清清楚楚的如今努力。
複製代碼

因爲小編時間經歷有限，所瞭解全部VUE的知識分爲私企與你們分享，內容若有到處還請您點撥，指正。TEL/V：15200025778javascript

本期主要內容

  1. 什麼是VUE
  2. 如何使用VUE
  3. MVVM
  4. 綁定語法
  5. 指令

一. 什麼是VUE:

  1. 什麼是: 是第三方開發的基於MVVM設計模式的漸進式的純前端js框架html

    (1). 第三方開發: 下載才能用前端

    (2). 基於MVVM: ?vue

    (3). 漸進式: 能夠在項目中逐步引入vue相關功能，很容易和其它技術混搭。java

    (4). 純前端js: 不須要任何nodejs和後端的知識，單靠瀏覽器就能夠運行和學習VUEnode

    (5). 框架: 已經包含核心功能的半成品前端程序jquery

  1. 爲何: 簡潔！避免大量重複的編碼！小程序

  2. 什麼時候: 從此只要以數據操做(增刪改查)爲主的項目，均可用vue開發後端

二. 如何使用VUE:

  1. 2種:設計模式

    (1). 將vue.js下載到項目本地引入網頁中使用

    a. 官網: cn.vuejs.org —— 中文！ —— 學有餘力才能去看！

    b. <script src="js/vue.js">

    c. 問題: 由於前端項目愈來愈龐大，文件夾結構和代碼量愈來愈複雜，致使不一樣的團隊和公司組織文件和文件夾結構時，各不相同！——混亂

    (2). 公司中都是用vue腳手架代碼來開發項目

    a. 什麼是: 已經包含標準的文件夾結構和核心功能的半成品項目！

    b. 優勢: 標準！不一樣團隊和不一樣公司發開出的項目結構幾乎是徹底相同的！

  2. 示例: 個人第一個vue程序，分別用jquery和vue實現點擊按鈕修改數量功能

    (1). jQuery版:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btnMinus">-</button><span>0</span><button id="btnAdd">+</button>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //DOM 4步
  //1. 查找觸發事件的元素
  //本例中: 點兩個按鈕修改數量
  var $btnMinus=$("#btnMinus");
  var $btnAdd=$("#btnAdd");
  //2. 綁定事件處理函數
  //本例中: 單擊兩個按鈕
  $btnAdd.click(function(){
    //3. 查找要修改的元素
    //本例中: 要修改span
    var $span=$("span");
    //4. 修改元素
    //先取出span中的內容，轉爲整數
    var n=parseInt($span.html())
    //再將span的內容+1
    n++;
    //最後將新值放回span內容中
    $span.html(n);
  });
  //2. 綁定事件處理函數
  //本例中: 單擊兩個按鈕
  $btnMinus.click(function(){
    //3. 查找要修改的元素
    //本例中: 要修改span
    var $span=$("span");
    //4. 修改元素
    //先取出span中的內容，轉爲整數
    var n=parseInt($span.html())
    //若是數量>0時，纔將span的內容-1
    if(n>0){ n-- }
    //最後將新值放回span內容中
    $span.html(n);
  });
  </script>
</body>
</html>

複製代碼

(2). VUE版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 編寫界面: 
  要求: 整個界面必須包裹在一個惟一的父元素內,習慣上: <div id="app"></div>
  額外: 2件事: 
  1.1 找到界面中未來可能發生變化的位置，用{{自定義變量名}}臨時佔位
  本例中: span的內容，未來隨點擊按鈕而變化，因此<span>{{n}}</span>
  1.2 找到界面中可能觸發事件的元素，用@事件名="自定義處理函數名"標記出來
  本例中: 單擊btnMinus時觸發減法操做，單擊btnAdd時觸發加法操做，因此
  -->
  <div id="app">
    <button id="btnMinus" @click="minus">-</button>
    <span>{{n}}</span>
    <button id="btnAdd" @click="add">+</button>
  </div>
  <!-- <div id="#app2">
  </div> -->
  <script>
    //2. 定義兩個倉庫對象: 倉庫名必須叫data和methods
    //2.1 一個倉庫叫data，專門保存界面上所需的全部變量和初始值
    //本例中: 界面上一共須要一個變量n，初始值爲0
    var data={ n:0 };
    //2.2 另外一個倉庫叫methods, 專門保存界面上所需的全部事件處理函數
    //本例中: 界面上共須要兩個事件處理函數,分別是add和minus
    var methods={
      //複習小程序->在線->JSCORE->day07 做業:ES6關於對象中屬性和方法的簡寫
      add(){
        //雖然如今事件處理函數和data中的n分着寫，可是未來data對象和methods對象會被vue合併爲一個對象，事件處理函數data中的變量最終會放在一個大的對象中保存，因此,methdos中的函數可經過this.xx方式操做data中的變量
        //本例中: 點btnAdd，觸發add函數，只想給data中的數量n+1
        this.n++;
        //不用本身放回去！
      },
      minus(){
        //本例中: 點btnMinus，觸發minus函數，若是data中的數量n>0，纔將數量n-1
        if(this.n>0){ this.n-- };
      }
    }
    //3. 建立一個VUE對象充當快遞員，自動送貨
    new Vue({
      el:"#app", //選擇器: 告訴快遞員，請將貨物送到id爲app的小區中的各個住戶手中！——這個快遞元素所負責的小區
      //告訴快遞員，須要配送的變量和函數都放在哪些倉庫裏。
      //複習小程序->在線->JSCORE->day07 做業:ES6關於對象中屬性和方法的簡寫
      data, //data:data, 
      methods //methods:methods
    });
    // new Vue({
    //   el:"#app2" //這個快遞員專門負責app2小區的自動送貨任務
    // })
  </script>
</body>
</html>
運行結果： 

複製代碼

  1. 總結: Vue開發一個功能的基本步驟: 3步

    (1). 定義界面:

    a. 要求: 整個界面全部元素必須放在一個惟有的父元素下包裹

    習慣上: ```<div id="app"> ... </div>```
複製代碼

    b. 找到界面內未來可能發生變化的位置，用{{自定義變量名}}臨時佔位

    c. 找到界面中全部觸發事件的元素，用@事件名="自定義處理函數名"標記

    (2). 定義倉庫對象: 2個 data和methods

    a. data: 專門保存界面中所需的全部變量及其初始值

    b. methods: 專門保存界面中所需的全部事件處理函數

    由於未來data對象和methods對象會被new
 Vue()合併爲一個對象，因此methods中的事件處理函數，和data中的變量最終會保存在同一個對象中。因此，methods中的事件處理函數能夠經過this.變量名操做data中的變量
複製代碼

    (3). 建立Vue對象，充當快遞員:

    new Vue({
	el:"#app", //選擇器: 告訴vue對象要將變量和函數送到頁面中哪一個大塊區域中的元素上。
	//告訴vue對象界面所需的一切變量和函數都保存在哪裏——倉庫位置
	data, //data:data, 
	methods, //methods:methods,
})
複製代碼

  2. 簡寫: 由於data對象和methods對象早晚都要被裝進newVue()對象中，因此實際開發中，咱們不單獨定義data和methods對象。而是直接在newVue()中data屬性和methods屬性值對象中直接添加頁面所需變量和事件處理函數:

new Vue({
		el:"#app", //選擇器: 告訴vue對象要將變量和函數送到頁面中哪一個大塊區域中的元素上。
		//告訴vue對象界面所需的一切變量和函數都保存在哪裏——倉庫位置
		data:{
			變量:初始值,
			  ... : ...
		}, 
		methods:{
			處理函數名(){
				this.變量
			},
			... 
		}
	})
複製代碼
  1. 示例: 簡寫以上案例:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--1. 編寫界面: -->
  <div id="app">
    <button id="btnMinus" @click="minus">-</button>
    <span>{{n}}</span>
    <button id="btnAdd" @click="add">+</button>
  </div>
  <script>
    //2. 建立一個VUE對象充當快遞員，自動送貨
    new Vue({
      el:"#app", 
      //3. 在Vue對象內添加data屬性和methods屬性，分別保存頁面所需的全部變量和事件處理函數
      data:{ 
        n:0 
      }, 
      methods:{
        add(){
          this.n++;
        },
        minus(){
          if(this.n>0){ this.n-- };
        }
      }
    });
  </script>
</body>
</html>
運行效果: 同上
複製代碼

  1. 簡寫後的步驟: 3步

    (1). 定義界面：

    (2). 先定義new Vue()對象，用選擇器找到本身負責的頁面區域

    (3). 在new Vue()對象內，添加data屬性和methods屬性，其值都是對象。

    a. data屬性對象中專門保存頁面所需的全部變量,

    b. methods屬性對象中專門保存頁面所需的全部函數。

  1. 結果: 不管任何緣由，只要data中的變量值發生變化！newVue()快遞員都會自動將新值從新送貨到界面中對應的元素上。newVue()會始終保持界面顯示的內容和data中變量值同步！

三. MVVM: (Model, View, ViewModel)

  1. 什麼是MVVM設計模式: 對前端代碼的從新劃分

  2. 舊前端代碼，分爲三部分:

    (1). HTML: 專門保存網頁的內容和結構

    (2). CSS: 專門爲網頁中的元素添加樣式

    (3). JS: 專門爲網頁中的元素添加交互效果

  3. 問題:

    (1). 由於HTML和CSS都是靜態的語言。缺乏標準的程序語言必須的要素

    a. 好比HTML和CSS中沒有變量，就沒法實現一次修改，多處變化

    b. 好比HTML和CSS中缺乏分支和循環，就沒法實現基本的判斷和反覆生成的功能

    總結: HTML和CSS生活不能自理！

    (2). 頁面上全部的瑣碎的修改都要依賴js來實現。致使js代碼極其冗餘，且包含大量重複勞動！

  4. 新MVVM，也將代碼分爲3部分:

    (1). 界面（View）: 包括之前的HTML+CSS，並且還加強了HTML的功能

    a. 給HTML添加了變量的功能:<span>{{n}}</span>若是n變化，則span自動變化，無需任何js代碼。

    b. 爲HTML添加了分支和循環功能: v-if v-else 以及v-for

    (2). 模型對象(Model): 專門集中保存頁面所需的變量和函數的對象

    好比: data和methods都是模型對象
 問題: 模型對象中的變量和方法不會本身長腿跑到界面中的元素上
複製代碼

    (3). 視圖模型(ViewModel): 快遞員

    a. 什麼是視圖模型:

    自動將data中的變量和methods中的函數送到界面中指定元素上，並能自動保持界面顯示與data中變量值同步 一種特殊的對象

    b. 好比: new Vue()就充當了視圖模型自動配送的角色。

    1. new Vue()如何實現MVVM設計模式: Vue的綁定原理: 訪問器屬性+虛擬DOM樹

    (1). 訪問器屬性: 複習： 小程序->在線->JSCORE->day05 5. 訪問器屬性 get set

    a. 回顧: 訪問器屬性:

    1). 專門提供對一個普通屬性的保護。
 2). 每一個訪問器屬性都包含一對兒, get和set函數
 i. 當外界試圖獲取訪問器屬性的值時，自動調用訪問器屬性中的get
 ii. 當外界試圖修改訪問器屬性的值時，自動調用訪問器屬性中的set
複製代碼

    b. new Vue()如何利用訪問器屬性:

    1). data對象和methods對象進入newVue()後會馬上被打散。data中的成員變量和methods中的成員函數，最終會直接隸屬於newVue()對象。且data中的變量和methods中的函數處於平級。因此methods中的函數才能用this.變量名方式訪問data中的變量

    因此，new Vue()中的幾乎全部this，都指new Vue()對象！
複製代碼

    Vue{ ... ...

... ... }

2). new Vue()隱藏data中原變量。而後爲data中每一個變量分別請保鏢(訪問器屬性)。結果: 任何狀況下操做data中的變量n，早就不是普通的變量了。實際操做的都是訪問器屬性。且，只要試圖修改data中的變量n，都會自動調用訪問器屬性n的set函！

3). new Vue()在每一個訪問器屬性的set函數中悄悄內置了一個通知函數。只要試圖修，都會調用訪問器屬性的set，都會制定向外發出通知: "xx變量的值變了！快來拿新值！"

(2). 虛擬DOM樹:

a. 什麼是: vue經過掃描真實DOM樹，只提取出個別可能發生變化的元素，組成的一個棵簡化版的新的DOM樹。

b. 爲何: 優勢： 

	1). 小, 只包含可能受影響的元素，不受影響的元素是不包含在內的
	2). 遍歷和查找快！
	3). 更新效率高，由於每次只更新受影響的元素，不受影響的元素，不變的！
	4). 避免重複代碼。虛擬DOM樹中已經提早封裝了DOM增刪改查操做！不用咱們本身寫！
	
c. 虛擬DOM樹在綁定過程當中如何發揮做用： 
	1). new Vue中任何位置修改了data中的變量，其實修改的都是訪問器屬性
	2). 都會自動觸發這個訪問器屬性的set，都會自動發出通知
	3). new Vue接到通知遍歷虛擬DOM樹，只找受本次變量修改影響的個別DOM元素
	4). 虛擬DOM樹利用已經封裝好的增刪改查操做，僅更新頁面上受影響的個別元素。而不是大範圍替換界面元素。—— 效率遠高於jQuery！
複製代碼

四. 綁定語法: 學名插值語法, Interpolation

  1. 什麼是綁定語法: vue給HTML中新增的一種可讓HTML直接使用js中的變量 的特殊語法.

  2. 爲何: 舊HTML不能使用js中的變量，哪怕很小的修改都要js先取出舊值，再修改後，最後放回來，才能更新界面——繁瑣！

  3. 什麼時候: 從此只要界面中一個元素的內容，須要隨js中變量自動變化，就要用綁定語法

  4. 如何: <元素>{{自定義變量名}}</元素>

  5. 後續: 若是界面中定義了一個{{自定義變量名}}，則newVue()的data中就必須添加一個同名的變量，來支持這個界面位置的變化！

  6. 其實: {{}}中除了能夠放單個變量以外，還能聽任何有返回值的合法的js表達式！——同ES6模板字符串${}的規則

    (1). 能夠放: 變量，運算，三目，有返回值的函數調用，建立對象，訪問數組元素

    (2). 不能夠放: 程序結構(分支和循環)以及沒有返回值的函數調用。

  7. 示例: 在網頁中用各類語法綁定變量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--複習： 小程序->在線->JSCORE->day07 1. 模板字符串-->
    <h3>Welcome {{uname}}</h3>
    <h3>性別: {{sex==1?"男":"女"}}</h3>
    <h3>小計: ¥{{(price*count).toFixed(2)}}</h3>
    <h3>下單時間: {{new Date(orderTime).toLocaleString()}}</h3>
    <h3>今天星期{{week[new Date().getDay()]}}</h3>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        uname:"dingding",
        sex:1,
        price:12.5,
        count:5,
        orderTime:1592549839941, //new Date().getTime()
        week:["日","一","二","三","四","五","六"]
        //     0    1    2    3    4    5   6
      }
    })
  </script>
</body>
</html>
運行結果:

複製代碼

  1. 問題: 若是元素的屬性值想根據js中的變量不斷變化，不能用{{}}語法，報錯
- src="{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}":
Interpolation inside attributes has been removed. 
 屬性中的插值語法已經被移除了
Use v-bind or the colon shorthand instead. For example, 
 請用v-bind或:簡寫代替. 例如， 
instead of <div id="{{ val }}">, use <div :id="val">.
 用<div :id="val"> 代替<div id="{{val}}">
 解決: 指令: 
複製代碼

五. 指令:

  1. 什麼是: 一批vue官方提供的，爲HTML添加新功能的特殊自定義擴展屬性

  2. 爲何: 由於{{}}只支持元素內容隨變量自動變化，不支持屬性自動變化，甚至沒法實現分支和循環等複雜結構

  3. 什麼時候: 從此只要元素的屬性值想隨變量自動變化或想給HTML添加更多新功能時，都用指令！

  4. 包括:

    (1). 若是元素的屬性值可能隨變量自動變化: v-bind

    a. <元素 v-bind:屬性名="js變量或表達式">

    b. 原理: 當new VUe()掃描到這裏時，或者依賴的變量發生變化時，newVue都會自動從新計算v-bind後的變量值或表達式結果，用變量值或表達式結果代替該屬性的值！

    c. 強調: 若是前邊加了v-bind:，則""中千萬不要再加{{}}，此時""就扮演了{{}}的角色。

    d. 簡寫: 從此v-bind: 都省略 v-bind，只寫:

    <元素 :屬性名="js變量或表達式">
複製代碼

    e. 示例: 根據pm25數值改變表情圖片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <!--需求: 但願img的src屬性值隨data中的pm25數值自動變化
  pm25<100，src屬性值爲img/1.png
  pm25<200, src屬性值爲img/2.png
  pm25<300, src屬性值爲img/3.png
  其他img/4.png
  -->
  <div id="app">
    <h3>{{pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'}}</h3>
    <img :src="pm25<100?'img/1.png':pm25<200?'img/2.png':pm25<300?'img/3.png':'img/4.png'" alt="">
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        pm25:350
      }
    })
  </script>
</body>
</html>
運行結果： 

複製代碼

(2). 根據js中的變量值控制一個元素的顯示隱藏: v-show

a. <元素 v-show="bool類型的變量或js條件表達式">

b. 原理: 當new Vue首次掃描到這裏或依賴的js變量發生變化時，newVue都會自動計算""中的變量值或js表達式值。

	1). 若是變量值或表達式值爲false，則new Vue()自動給元素添加display:none，當前元素隱藏
	2). 若是變量值或表達式值爲true，則new Vue()自動去掉元素上的display:none，當前元素就顯示
複製代碼

c. 示例: 打開和關閉對話框(極其經常使用)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
  <style>
    #alert{
      width:300px; 
      height:100px;
      background-color:#ffa;
      position:fixed;
      top:50%;
      left:50%;
      margin-left:-150px;
      margin-top:-50px;
      line-height:100px;
    }
    #alert>a{
      float:right;
      line-height:30px;
      margin-right:10px;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--但願div#alert隨變量isShow的值不一樣而顯示隱藏
        但願點click me，讓div#alert顯示（將isShow變量值改成true）
        但願點×，讓div#alert隱藏（將isShow變量值改成false）-->
    <button @click="pop">click me</button>
    <div v-show="isShow" id="alert">
      <a href="javascript:;" @click="close">×</a>
      您的瀏覽器版本過低，請升級瀏覽器
    </div>
  </div>
  <script>
    new Vue({
      el:"#app",
      //由於頁面上須要一個isShow變量，因此
      data:{
        isShow:false//定義一個變量控制對話框的顯示和隱藏，開局默認隱藏
      },
      //由於頁面上須要？個事件處理函數: pop和close
      methods:{
        pop(){
          this.isShow=true;
        },
        close(){
          this.isShow=false;
        }
      }
    })
  </script>
</body>
</html>
運行結果： 


複製代碼

(3). 根據js中的變量值，控制兩個元素二選一顯示隱藏: v-if v-else

a. <元素1 v-if="bool變量或js條件表達式">
  <元素2 v-else >
b. 原理: 當new Vue首次掃描到這裏或依賴的js變量發生變化時，newVue都會自動計算v-if後""中的變量值或js表達式值
	1). 若是v-if後的值爲true，則保留v-if所在元素，刪除v-else所在元素
	2). 若是v-if後的值爲false，則刪除v-if所在元素，保留v-else所在元素 
c. 強調:
	1). 和程序中的if else同樣，v-else後不要寫="xxx"
	2). v-if和v-else兩個元素必須緊挨着，中間不能插入別的元素！
d. 示例: 切換登陸和註銷狀態
複製代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--根據變量值不一樣，顯示不一樣的登陸狀態-->
    <!--但願點擊登陸，切換到已登陸狀態
        但願點擊註銷，切換回未登陸狀態-->
    <!--但願未登陸時只顯示第一個div-->
    <div v-if="isLogin==false">
      <a href="javascript:;" @click="login">登陸</a> | <a href="javascript:;">註冊</a>
    </div>
    <!--已登陸時只顯示第二個div-->
    <div v-else>
      <h3>Welcome dingding | <a href="javascript:;" @click="logout">註銷</a></h3> 
    </div>
  </div>
  <script>
    new Vue({
      el:"#app",
      //由於頁面上須要根據一個變量值顯示不一樣的登陸狀態，因此data中要提供一個變量表示是否登陸
      data:{
        isLogin:false,//開局，默認未登陸
      },
      //由於頁面上須要兩個事件處理函數，因此methods中就要準備2個事件處理函數: login    logout
      methods:{
        login(){
          this.isLogin=true;
        },
        logout(){
          this.isLogin=false;
        }
      }
    })
  </script>
</body>
</html>
運行結果： 


複製代碼

e. 鄙視: v-show 和 v-if的區別？

1). v-show經過刪除元素  display:none 實現隱藏 ——不改變DOM樹結構，效率高
	2). v-if  經過刪除元素 實現隱藏 —— 改變DOM樹，效率略低
複製代碼

(4). 多個元素多選一顯示： v-if v-else-if v-else

a. <元素1  v-if="bool變量或js條件表達式">
  <元素2  v-else-if="另外一個bool變量或js條件表達式">
  ... ...
  <元素n  v-else>
b. 原理: 當new Vue首次掃描到這裏或依賴的js變量發生變化時，new Vue都會自動計算v-if後""中的變量值或js表達式值。
	1). 若是v-if後的值爲true，則保留v-if所在元素，刪除其他全部v-else-if和v-else的元素
	2). 若是v-if後的值爲false，則刪除v-if的元素，繼續向後判斷每一個v-else-if後的條件。哪一個v-else-if後的條件爲true，就只保留這個v-else-if所在的元素。刪除其他元素
	3). 若是全部v-if和v-else-if中的條件都爲false，則刪除全部v-if和v-else-if，只保留v-else所在元素
c. 強調: 
	1). 和程序中的if else同樣，v-else後不要寫="條件"
	2). v-if和v-else-if和v-else多個元素必須緊挨着，中間不能插入別的元素！
d. 示例: 根據PM25數值顯示不一樣的表情
複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!--但願根據pm25的數值，修改頁面上的圖片:
      pm25<100，顯示img/1.png
      pm25<200, 顯示img/2.png
      pm25<300, 顯示img/3.png
      其他img/4.png
    -->
    <img v-if="pm25<100" src="img/1.png" alt="">
    <img v-else-if="pm25<200" src="img/2.png" alt="">
    <img v-else-if="pm25<300" src="img/3.png" alt="">
    <img v-else src="img/4.png" alt="">
  </div>
  <script>
    new Vue({
      el:"#app",
      //由於頁面上須要根據pm25的數值控制顯示哪張圖片，因此: 
      data:{
        pm25:360
      }
    })
  </script>
</body>
</html>
運行結果:

複製代碼

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程