Java登陸第三十七天——VUE3響應式基礎、條件渲染、列表渲染

rowbed發表於2024-04-04
JavaVue

響應式資料

什麼是響應式資料？
	當資料發生改變時，DOM樹的內容，會和資料同步更新。
	vue3不是自動響應式資料，需要經過函式處理得到響應式資料物件。

ref和reactive

這兩個函式都會返回響應式資料物件，但也有不同。

ref

ref通常用於將一個基本型別轉為響應式資料物件。

基本型別包括：數、字串、布林值、null和undefined。

讀寫值（訪問和修改屬性值）

  • 在script標籤中，透過該物件.value屬性，讀寫值。

  • 在template標籤中，直接訪問該物件，讀寫值。

栗子

App.vue

<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//雖然ref和reactive都是響應式資料函式，但ref更常用於基本型別，reactive更常用於物件。
let str1 = ref(10);
let str2 = ref("msg");
</script>

<template>
<!--在事件繫結中，可以直接寫一些簡單的處理器-->
  <h3 v-text="str1"></h3>
  <button @click="str1++">按鈕1</button>
  <h3 v-text="str2"></h3>
  <button @click="str2='hello'">按鈕2</button>
</template>

<style scoped>
</style>

效果展示
image

reactive

reactive通常用於將一個物件轉為響應式資料物件。

物件包括：陣列，物件等。

讀寫值（訪問和修改屬性值）

可以直接訪問該物件讀寫值。

栗子

App.vue

<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//雖然ref和reactive都是響應式資料函式，但ref更常用於基本型別，reactive更常用於物件。
//物件
let str3 = reactive({name: "張三", age: 18});
//陣列
let str4 = reactive([ {name: "張三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18} ]);
</script>

<template>
  <!--在事件繫結中，可以直接寫一些簡單的處理器-->
  <h3>{{str3.age}}</h3>
  <button @click="++str3.age">按鈕1</button>
  <h3 v-text="str4"></h3>
</template>

<style scoped>
</style>

效果展示（栗子中去掉了ref的程式碼）
image

可以發現str4展示的好醜啊。沒關係，在列表渲染中可以展示的更加完善。

條件渲染

條件渲染專門負責布林表示式被滿足時，才展示的資料/標籤。

提供了三種條件渲染命令：v-if、v-else和v-show

語法格式如下：

<標籤 v-if=" 布林表示式 "></標籤>
	<標籤 v-else=" 與v-if的布林表示式相反 "></標籤>
//類似於Java中的if和else

<標籤 v-show=" 布林表示式 "></標籤>

條件渲染的特點：

  1. 同Java一樣，v-else不能單獨出現，必須跟隨v-if。

  2. 某個標籤的v-if的布林表示式不被滿足時，DOM樹中不會出現該標籤。

  3. 某個標籤的v-show的布林表示式不被滿足時，DOM樹中依然會出現該標籤，只是display屬性為none。

栗子

App.vue

<script setup>
import {ref} from 'vue';
//響應式資料，及時更新dom樹
let flag = ref(true);
</script>

<template>
  <!--展示條件渲染2、3特點-->
  <h3 v-if="false">hello v-if!</h3>
  <h3 v-show="false">hello v-show!</h3>

  <h3 v-if="flag">hello world!我是flag為T</h3>
  <h3 v-else>hello world!我是flag為F</h3>
  <button @click="flag = !flag">切換flag</button>
</template>

<style scoped>
</style>

效果展示
image
當v-if的布林表示式不成立時，DOM樹中不會出現該內容。

列表渲染

列表渲染可以遍歷。經常基於一個陣列物件來渲染一個列表。

提供了一種列表渲染命令：v-for

語法格式如下：

<標籤 v-for="item in items"></標籤>

文字渲染的特點：

  1. item in items類似與Java的foreach，只不過冒號變成了in。

  2. 官方不推薦在同一個標籤內，和v-if一起使用。

注意是同一個標籤內。可以是上下級標籤。

栗子

App.vue

<script setup>
import {ref, reactive} from 'vue';
//響應式基礎的str4
let per = reactive([{name: "張三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18}]);
</script>

<template>
  <table>
    <tr>
      <th>姓名</th>
      <th>年齡</th>
    </tr>

    <tr v-for="p in per">
      <td v-text="p.name"></td>
      <td v-text="p.age"></td>
    </tr>

  <!--這種寫法雖然生效，但是官方不推薦。降低了可讀性-->
    <tr v-if="per.length>0" v-for="p in per">
      <td>per陣列是空的</td>
    </tr>
    
    <!--使用了上級標籤div，推薦，增加了可讀性。-->
    <div v-if="per.length>0">
      <tr v-for="p in per">
        <td v-text="p.name"></td>
        <td v-text="p.age"></td>
      </tr>
    </div>
    
  </table>
</template>

<style scoped>
</style>

效果展示
image

相關文章