Vue3中的模板語法怎么使用

這篇文章主要介紹“Vue3中的模板語法怎么使用”，在日常操作中，相信很多人在Vue3中的模板語法怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中的模板語法怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、什么是模板語法？

我們可以把 Vue.js 的模板語法，直接理解為 HTML 語法的一種擴展，它所有的模板節點聲明、屬性設置和事件注冊等都是按照 HTML 的語法來進行擴展設計的。按照官方的說法就是“所有的 Vue 模板都是語法層面合法的 HTML，可以被符合規范的瀏覽器和 HTML 解析器解析”。

Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實例的數據綁定到呈現的 DOM 上

二、內容渲染指令

1. v-text

使用 v-tex t指令，將數據采用純文本方式填充其空元素中

// 組合式
<script setup>

    import { reactive } from 'vue'

    let student = reactive({
        name: 'Jack',
        desc: '<h4>我是來自中國的小朋友！</h4>'
    })
    
</script>

<template>

  <!-- 使用v-text指令，將數據采用純文本方式填充其空元素中 -->
  
  <div v-text="student.name"></div>

  <!-- v-text：以純文本的方式顯示數據 -->
  <div v-text="student.desc"></div>

  <!-- 下面的代碼會報錯：div 元素不是空元素 -->
  <!-- <div v-text="student.name">這是原始的div數據</div> -->
   
</template>

2. {{ }} 插值表達式

在元素中的某一位置采用純文本的方式渲染數據

// 組合式
<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h4>我是來自中國的小朋友！</h4>'
})

</script>

<template>

    <!-- 插值表達式：在元素中的某一位置采用純文本的方式渲染數據 -->
    <div>這是一個 DIV 元素，{{ student.name }}，{{ student.desc }}</div>

</template>

3. v-html

使用 v-html 指令，將數據采用 HTML 語法填充其空元素中

// 組合式
<script setup>

import { reactive } from 'vue'

let student = reactive({
    name: 'Jack',
    desc: '<h4>我是來自中國的小朋友！</h4>'
})


</script>

<template>

    <!-- 使用v-html指令，將數據采用HTML語法填充其空元素中 -->

    <div v-html="student.name"></div>

    <!-- v-html：以 HTML 語法顯示數據 -->
    <div v-html="student.desc"></div>

    <!-- 下面的代碼會報錯：div 元素不是空元素 -->
    <!-- <div v-html="student.name">這是原始的div數據</div> -->

</template>

三、雙向綁定指令

1. v-model

v-model 雙向數據綁定指令，視圖數據和數據源同步
一般情況下 v-model 指令用在表單元素中：

• 文本類型的 <input> 和 <textarea> 元素會綁定 value 屬性并偵聽 input 事件

• <input type="checkbox"> 和 <input type="radio"> 會綁定 checked 屬性并偵聽 change 事件

• <select>會綁定 value 屬性并偵聽 change 事件

// 組合式
<script setup>

import { ref } from 'vue' 

let inputText = ref('ABC')  // 單行文本框
let message = ref('本次更新有以下幾點：……') // 多行文本框
let open = ref(true) // 開燈（復選框）
let determine = ref('不確定') // 是否確定（復選框）
let likes = ref(['YMQ']) // 興趣愛好（復選框）
let sex = ref('woman') // 性別（單選按鈕）
let level = ref('B') //  // 證書等級（單選下拉框）
let city = ref(['蘇C', '蘇B']) // 去過的城市（多選下拉框）

</script>

<template>

    <!-- 單行文本框 -->
    <input type="text" v-model="inputText">

    <hr>
    <!-- 多行文本框 -->
    <textarea v-model="message"></textarea>

    <hr>
    <!-- 默認情況下，復選框的值：true/false -->
    <input type="checkbox" v-model="open"> 燈

    <hr>
    <!-- 自定義復選框值： true-value/false-value -->
    <input type="checkbox" true-value="確定" false-value="不確定" v-model="determine"> 是否確定

    <hr>
    <input type="checkbox" value="LQ" v-model="likes"> 籃球
    <input type="checkbox" value="ZQ" v-model="likes"> 足球
    <input type="checkbox" value="YMQ" v-model="likes"> 羽毛球
    <input type="checkbox" value="PPQ" v-model="likes"> 乒乓球

    <hr>
    <input type="radio" value="man" v-model="sex"> 男
    <input type="radio" value="woman" v-model="sex"> 女

    <hr>
    證書等級：
    <select v-model="level">
        <option value="C">初級</option>
        <option value="B">中級</option>
        <option value="A">高級</option>
    </select>

    <hr>
    去過的城市：
    <select multiple v-model="city">
        <option value="蘇A">南京</option>
        <option value="蘇B">無錫</option>
        <option value="蘇C">徐州</option>
        <option value="蘇D">常州</option>
    </select>

</template>

2. v-model的修飾符

// 組合式
<script setup>

import { ref } from 'vue' 

let age = ref(20)
let nickname = ref('')

</script>

<template>
    
    <p>將用戶輸入的值轉成數值 .number，懶更新 .lazy</p>
    <!-- 。number 將用戶輸入的值轉成數值，如果用戶輸入的內容無法轉成數字，將不會更新數據源 -->
    <!-- .lazy 在 change 跟新數據源，而不是 input  -->
    <input type="text" v-model.lazy.number="age">

    <hr>
    <p>去掉首尾空白字符</p>
    <input type="text" v-model.trim="nickname">

</template>

四、屬性綁定指令

• 響應式地綁定一個元素屬性，應該使用 v-bind: 指令

• 如果綁定的值是 null 或者 undefined，那么該屬性將會從渲染的元素上移除

• 因為 v-bind 非常常用，我們提供了特定的簡寫語法:

// 組合式
<script setup>

import { reactive } from 'vue'

let picture = reactive({
    src: 'https://cache.yisu.com/upload/information/20230306/112/35391.jpg', // 圖像地址
    width: 200 // 顯示寬度
})

</script>

<template>

    <input type="range" min="100" max="500" v-model="picture.width">

    <hr>
    <!-- v-bind: 為 src 屬性綁定指定的數據源 -->
    <img v-bind:src="picture.src" v-bind:width="picture.width">

    <hr>
    <!-- : 是 v-bind: 的縮寫形式 -->
    <img :src="picture.src" :width="picture.width">

    <hr>

    <!-- 如果綁定的值是 null 或者 undefined，那么該屬性將會從渲染的元素上移除 -->
    <button @click="picture.width = null">設置寬度為NULL</button>

</template>

1. 動態綁定多個屬性值

直接使用 v-bind 來為元素綁定多個屬性及其值

// 組合式
<script setup>

import {reactive} from 'vue'

let attrs = reactive({
    class: 'error',
    id: 'borderBlue'
})

</script>

<template>
    
    <!-- 直接使用 v-bind 來為元素綁定多個屬性及其值 -->
    <button v-bind="attrs">我是一個普通的按鈕</button>

</template>

<style>
    .error {
        background-color: rgb(167, 58, 58);
        color: white;
    }

    #borderBlue {
        border: 2px solid rgb(44, 67, 167);
    }
</style>

渲染結果：
<button class="redBack" id="btnBorderBlue">我是一個普通按鈕</button>

2. 綁定class和style屬性

class 和 style 可以和其他屬性一樣使用 v-bind 將它們和動態的字符串綁定；但是，在處理比較復雜的綁定時，通過拼接生成字符串是麻煩且易出錯的；因此， Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強；除了字符串外，表達式的值也可以是對象或數組。

class屬性綁定

綁定對象

// 組合式
<script setup>

import { ref, reactive } from 'vue'

let btnClassObject = reactive({
    error: false, // 主題色
    flat: false // 陰影
})

let capsule = ref(false)// 膠囊
let block = ref(false)// 塊

</script>

<template>

    <input type="checkbox" v-model="btnClassObject.error"> error
    <input type="checkbox" v-model="btnClassObject.flat"> flat
    <br>
    <br>
    <button :class="btnClassObject">我是一個普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" v-model="block"> 塊
    <br>
    <br>
    <button :class="{ 'rounded': capsule, 'fullWidth':  block }">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style>

綁定數組

// 組合式
<script setup>

import { ref, reactive } from 'vue'

let btnTheme = ref([]) // 按鈕class數組

let capsule = ref(false)// 膠囊
let widthTheme = ref([])// 寬度數組

</script>

<template>

    <input type="checkbox" value="error" v-model="btnTheme"> error
    <input type="checkbox" value="flat" v-model="btnTheme"> flat
    <br>
    <br>
    <!-- 直接使用數組數據源，數組中有哪些值，直接在該元素的class里出現對應的類名 -->
    <button :class="btnTheme">我是一個普通的按鈕</button>


    <hr>
    <input type="checkbox" v-model="capsule"> 膠囊
    <input type="checkbox" value="fullWidth" v-model="widthTheme"> 塊
    <br>
    <br>
    <!-- 數組和對象一起使用 -->
    <button :class="[{ 'rounded': capsule }, widthTheme]">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}

.error {
    background-color: rgb(167, 58, 58);
    color: white;
}

.flat {
    box-shadow: 0 0 8px gray;
}

.rounded {
    border-radius: 100px;
}

.fullWidth {
    width: 100%;
}
</style>

style屬性綁定

綁定對象

// 組合式
<script setup>

import { reactive, ref } from 'vue'

let btnTheme = reactive({
    backgroundColor: '#FF0000', // 背景色
    color: '#000000' // 文本色
})

let backColor = ref('#0000FF')  // 背景色
let color = ref('#FFFFFF')  // 文本色
let borRadius = ref(20) // 邊框圓角

</script>

<template>

    背景色：<input type="color" v-model="btnTheme.backgroundColor">
    文本色：<input type="color" v-model="btnTheme.color">
    <br>
    <br>
    <!-- style：可以直接綁定對象數據源，但是對象數據源的屬性名當樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :>我是一個普通的按鈕</button>

    <hr>

    背景色：<input type="color" v-model="backColor">
    文本色：<input type="color" v-model="color">
    邊框圓角：<input type="range" min="0" max="20" v-model="borRadius">
    <br>
    <br>
    <!-- style：可以直接寫對象，但是對象的屬性名當樣式屬性（駝峰命名法，kebab-cased形式） -->
    <button :style="{
        backgroundColor: backColor,
        color,
        'border-radius': borRadius + 'px'
    }">我是一個普通的按鈕</button>

</template>

<style>
button {
    border: none;
    padding: 15px 20px;
    background-color: rgb(179, 175, 175);
}
</style>

綁定數組

還可以給 :style 綁定一個包含多個樣式對象的數組，這些對象會被合并后渲染到同一元素上

// 組合式
<!-- 腳本區域 -->
<script setup>
import { ref, reactive } from 'vue'

const btnTheme = ref([
    {
        backgroundColor: '#FF0000', // 背景色
        color: '#FFFFFF' // 文本色
    },
    {
        borderRadius: 0 // 邊框圓角
    }
])

const colorTheme = reactive({
    backgroundColor: '#000000', // 背景色
    color: '#FFFFFF' // 文本色
})

const radiusTheme = reactive({
    borderRadius: 0 // 邊框圓角
})
</script>

<!-- 視圖區域 -->
<template>

    背景色：<input type="color" v-model="btnTheme[0].backgroundColor">
    文本色：<input type="color" v-model="btnTheme[0].color">
    膠囊：<input type="checkbox" true-value="5px" false-value="0" v-model="btnTheme[1].borderRadius">
    <br>
    <br>
    <!-- 直接傳入數組 -->
    <button :>我是一個普通按鈕</button>

    <hr>

    背景色：<input type="color" v-model="colorTheme.backgroundColor">
    文本色：<input type="color" v-model="colorTheme.color">
    膠囊：<input type="checkbox" true-value="5px" false-value="0" v-model="radiusTheme.borderRadius">
    <br>
    <br>
    <!-- 直接寫數組 -->
    <button :>我是一個普通按鈕</button>
</template>

<style>
button {
    padding: 15px 20px;
    border: none;
}
</style>

五、條件渲染指令

1. v-if、v-else-if、v-else

• v-if 指令用于條件性地渲染元素；該內容只會在指令的表達式返回真值時才被渲染

• v-else-if 提供的是相應于 v-if 的 else if 區塊，它可以連續多次重復使用

• 你也可以使用 v-else 為 v-if 添加一個 else 區塊

• v-else 和 v-else-if 指令必須配合

• v-if 指令一起使用 ，否則它將不會被識別，而且語句塊中間不能出現無關其他元素v-if 支持在 <template> 元素上使用，這只是一個不可見的包裝器元素，最后渲染的結果并不會包含這個 <template> 元素

// 組合式
<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // 是否顯示
let age = ref(20)  // 年齡
let week = ref(3)  // 周幾

</script>


<template>

    是否顯示：<input type="checkbox" v-model="isShow">
    <!-- 
        v-if：指令表達式為真時才會渲染該元素 
        為true時會創建該元素，為false時會銷毀該元素
    -->
    <h4 v-if="isShow">這是一個普通的標題標簽</h4>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}
    <!-- 
        v-if：可以配合 v-else-if 和 v-else 來搭建多重判斷條件，他們中間不要參雜無關緊要的元素 
    -->
    <h2 v-if="age < 18">未成年</h2>
    <!-- <span>無關緊要的元素</span> -->
    <h3 v-else-if="age < 35">青年</h3>
    <h4 v-else-if="age < 50">中年</h4>
    <h5 v-else>老年</h5>

    <hr>

    周幾: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-if：可以配合 template 元素使用，最后渲染的結果并不會包含這個 <template>元素 -->
    <template v-if="week == 1 || week == 3 || week == 5 || week == 7">
        <h2>可以游泳</h2>
    </template>
    <template v-else>
        <h2>不可以游泳</h2>
    </template>

</template>

2. v-show

• v-show 按條件顯示一個元素的指令v-show 會在 DOM 渲染中保留該元素

• v-show 僅切換了該元素上名為 display 的 CSS 屬性

• v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用

// 組合式
<script setup>

import { ref } from 'vue'

let isShow = ref(false)  // 是否顯示
let age = ref(20)  // 年齡
let week = ref(3)  // 周幾

</script>


<template>

    是否顯示：<input type="checkbox" v-model="isShow">
    <!-- 
        v-show：指令表達式為真時才會渲染該元素 
        無論該指令的表達式是否 true 或 false，該元素在元素中是保留該元素的
        為 true 時會刪除該元素的 display:none 樣式，為 false 時會給該元素添加 display:none 樣式
    -->
    <h4 v-show="isShow">這是一個普通的標題標簽</h4>

    <hr>

    年齡: <input type="range" min="0" max="100" v-model="age"> {{ age }}

    <h2 v-show="age < 18">未成年</h2>
    <h3 v-show="age >= 18 && age < 35">青年</h3>
    <h4 v-show="age >= 35 && age < 50">中年</h4>
    <h5 v-show="age >= 50">老年</h5>

    <hr>

    周幾: <input type="range" min="1" max="7" v-model="week"> {{ week }}

    <!-- v-show：不可以配合 template 元素使用 -->
    <!-- <template v-show="week == 1 || week == 3 || week == 5 || week == 7">
        <h2>可以游泳</h2>
    </template>
    <template v-shw="week == 12 || week == 4 || week == 6">
        <h2>不可以游泳</h2>
    </template> -->

</template>

3. v-if和v-show的區別

• v-if 是“真實的”按條件渲染，因為它確保了在切換時，條件區塊內的事件監聽器和子組件都會被銷毀與重建

• v-if 也是惰性的：如果在初次渲染時條件值為 false，則不會做任何事；條件區塊只有當條件首次變為 true 時才被渲染

• v-show 元素無論初始條件如何，始終會被渲染，只有 CSS display 屬性會被切換

• v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷；如果需要頻繁切換，則使用 v-show 較好；如果在運行時綁定條件很少改變，則 v-if 會更合適

六、事件綁定指令

我們可以使用 v-on: 指令 (簡寫為@) 來監聽 DOM 事件，并在事件觸發時執行對應的 JavaScript
用法：v-on:click="" 或 @click=""

用法：

// 組合式
<script>
export default {
    data: () => ({
        volume: 5  // 音量[0, 10]
    }),
    methods: {
        // 添大音量
        addVolume() {
            // 如果音量沒有在最高值，則添加音量
            if (this.volume !== 10) {
                this.volume++
            }
        },
        // 減小音量
        subVolume() {
            // 如果音量沒有在最小值，則減小音量
            if (this.volume !== 0) {
                this.volume--
            }
        },
        // 設置音量
        setVolume(value) {
            // 判斷音量是否在取值范圍之間
            if (value >= 0 && value <= 10) {
                this.volume = value
            }

        }
    }
}
</script>
<template>

    <h4>當前音量：{{ volume }}</h4>

    <!-- v-on: 事件綁定 -->
    <button v-on:click="addVolume">添加音量</button>
    <button v-on:click="subVolume">減小音量</button>

    <hr>

    <!-- @ 是 v-on: 的縮寫 -->
    <button @click="setVolume(0)">靜音</button>
    <button @click="setVolume(5)">音量適中</button>
    <button @click="setVolume(10)">音量最大</button>

</template>

1. 事件修飾符

.prevent

.prevent ：阻止該事件的默認行為

// 組合式
<script setup>

// 打招呼
function say(name) {
    window.alert('你好：' + name)
}

</script>


<template>

    <!-- .prevent 修飾符阻止了超鏈接的默認行為（跳轉到百度頁） -->
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.prevent="say('baiDu')">百度</a>

</template>

.stop

.stop ：阻止事件產生的冒泡現象

// 組合式
<script setup>
// 打招呼
function say(name) {
    console.log('你好：' + name)
}
</script>

<template>
    <div class="divArea" @click="say('DIV')">
        <!-- .stop：阻止產生冒泡事件 -->
        <button @click.stop="say('BUTTON')">冒泡按鈕</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.once

.once ：綁定的事件只觸發 1 次

// 組合式
<script setup>
// 打招呼
function say(name) {
    window.alert('你好：' + name)
}
</script>

<template>
    <!-- .once：綁定的事件只觸發一次 -->
    <button @click.once="say('BUTTON')">點我試一下</button>
</template>

.self

.self ：只有在 event.target 是當前元素自身時觸發事件處理函數

// 組合式
<script setup>
// 打招呼
function say(name) {
    window.alert('你好：' + name)
}
</script>

<template>
    <!-- .self：只在該元素上觸發事件有效，其子元素無效 -->
    <div class="divArea" @click.self="say('DIV')">
        <button>我是一普通的按鈕</button>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.capture

.capture 給元素添加一個監聽器

• 當元素事件產生冒泡時，先觸發的是該修飾符的元素的事件

• 如果有多個該修飾符，則由外向內依次觸發

// 組合式
<script setup>
// 打招呼
function say(name) {
    console.log('你好：' + name)
}
</script>

<template>
    <!-- 
        .capture 給元素添加一個監聽器
        1：當元素事件產生冒泡時，先觸發的是該修飾符的元素的事件
        2：如果有多個該修飾符，則由外向內依次觸發
     -->
    <div class="divArea" @click.capture="say('DIV-1')">
        <div class="divArea" @click="say('DIV-2')">
            <div class="divArea" @click.capture="say('DIV-3')">
                <button>我是一普通的按鈕</button>
            </div>
        </div>
    </div>
</template>

<style>
.divArea {
    padding: 30px;
    border: 2px solid blue;
}
</style>

.passive

.passive ：不阻止事件的默認行為，與 .prevent 不要同時使用

// 組合式
<script setup>
function eventPrevent() {
    // 阻止事件默認行為
    event.preventDefault()
}
</script>

<template>
    <!-- .passive：先執行默認行為，不考慮執行的代碼中是否包含 event.preventDefault() -->
    <a href="http://www.baidu.com" rel="external nofollow"  rel="external nofollow"  @click.passive="eventPrevent">百度</a>
</template>

2. 按鍵修飾符

按鍵別名：.enter、.tab、.esc、.space、.up、.down、.left、.right、.delete (捕獲 Delete 和 Backspace 兩個按鍵)
系統修飾符：.ctrl、.alt、.shift、.meta
準確的修飾符：.exact

// 組合式
<script setup>
// 彈出消息
function showMessage(message) {
    window.alert(message)
}
</script>

<template>
    按下的鍵中包含 Enter 鍵事件： <input type="text" @keydown.enter="showMessage('你按下了 Enter 鍵')">
    <hr>
    按下的鍵中包含 Shift Enter 鍵事件：<input type="text" @keydown.enter.shift="showMessage('你按下了 Shift + Enter 鍵')"/>
    <hr>
    按下的鍵只有 Shift Enter 鍵事件：<input type="text" @keydown.enter.shift.exact="showMessage('你只按下了 Shift + Enter 鍵')"/>
</template>

3. 鼠標按鍵修飾符

鼠標按鍵修飾符：.left、.right、.middle

// 組合式
<!-- 腳本區域 -->
<script setup>
    function showTest(text) {
        window.alert(text)
    }
</script>

<!-- 視圖區域 -->
<template>
    <!-- 鼠標右鍵按下 -->
    <button @mousedown.right="showTest('按下的是鼠標右鍵')">鼠標右鍵按下</button>

    <hr>
    <!-- 點擊時，采用的是鼠標中鍵 -->
    <button @click.middle="showTest('按下的是鼠標中鍵')">點擊時，采用的是鼠標中鍵</button>

    <hr>
    <!-- 鼠標左鍵按下 -->
    <button @mousedown.left="showTest('按下的是鼠標左鍵')">鼠標左鍵按下</button>
</template>

<!-- 樣式區域 -->
<style>
    button {
        border: none;
        padding: 15px 20px;
    }

    button:active {
        box-shadow: 0 0 5px grey;
    }
</style>

七、列表渲染指令

使用 v-for 指令基于一個數組來渲染一個列表

1. v-for渲染數組

語法：

in 前一個參數：item in items
item ：值
items ：需要循環的數組in 前兩個參數：(value, index) in items
value ：值
index ：索引
items ：需要循環的數組

// 組合式
<script setup>
import { ref } from 'vue'
// 課程
let subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'UI設計' },
    { id: 4, name: 'Hadoop' },
    { id: 5, name: '影視后期' },
])
</script>

<template>
    <!-- 
        item in itmes
        item：值，當前循環的數組值
        itmes：循環的數組
     -->
    <h7>v-for 渲染數組， v-for="item in itmes"</h7>
    <ul>
        <li v-for="sub in subject">
            編號：{{ sub.id }} --- 名稱：{{ sub.name }}
        </li>
    </ul>

    <hr>

    <!-- 解構對象 -->
    <h7>v-for 渲染數組， v-for="{ 解構…… } in itmes"</h7>
    <ul>
        <li v-for="{ id , name } in subject">
            編號：{{ id }} --- 名稱：{{ name }}
        </li>
    </ul>

    <hr>
    <!-- 
        (value, index) in itmes
        value：值
        index：索引
        itmes：循環的數組
     -->
    <h7>v-for 渲染數組， v-for="(value, index) in itmes"</h7>
    <ul>
        <li v-for="(sub, index) in subject">
            編號：{{ sub.id }} --- 名稱：{{ sub.name }} --- 索引：{{ index }}
        </li>
    </ul>

    <hr>

    <!-- 解構對象 -->
    <h7>v-for 渲染數組， v-for="({ 解構…… }, index) in itmes"</h7>
    <ul>
        <li v-for="({ id , name } , index) in subject">
            編號：{{ id }} --- 名稱：{{ name }} --- 索引：{{ index }}
        </li>
    </ul>
</template>

2. v-for渲染對象

使用 v-for 來遍歷一個對象的所有屬性，遍歷的順序會基于對該對象調用 Object.keys() 的返回值來決定
語法：

in 前一個參數：value in object
value ：屬性值
items ：需要循環的對象in 前兩個參數：(value, name) in object
value ：屬性值
name ：鍵
items ：需要循環的對象in 前三個參數：(value, name, index) in object
value ：屬性值
name ：鍵
index ：索引
items ：需要循環的對象

// 組合式
<script setup>
import { reactive } from 'vue'
let student = reactive({
    styNum: '007', // 學號
    name: 'Jack', // 名字
    age: 18 //年齡
})
</script>

<template>
    <!-- 
        value in object
        value：屬性值
        object：循環的對象
     -->
    <h7>v-for 渲染對象， v-for="value in object"</h7>
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name) in object
        value：屬性值
        name：屬性名
        object：循環的對象
     -->
    <h7>v-for 渲染對象， v-for="(value, name) in object"</h7>
    <ul>
        <li v-for="(value, name) in student">
            屬性名：{{ name }} --- 屬性值： {{ value }}
        </li>
    </ul>

    <hr>

    <!-- 
        (value, name, index) in object
        value：屬性值
        name：屬性名
        index: 索引
        object：循環的對象
     -->
    <h7>v-for 渲染對象， v-for="(value, name, index) in object"</h7>
    <ul>
        <li v-for="(value, name, index) in student">
            屬性名：{{ name }} --- 屬性值： {{ value }} --- 索引：{{ index }}
        </li>
    </ul>
</template>

3. 通過 key 管理狀態

當列表的數據變化時，默認情況下，vue 會盡可能的復用已存在的 DOM 元素，從而提升渲染的性能；但這種默認的性能優化策略，會導致有狀態的列表無法被正確更新。
為了給 vue 一個提示，以便它能跟蹤每個節點的身份，從而在保證有狀態的列表被正確更新的前提下，提升渲染的性能；此時，需要為每項提供一個唯一的key屬性：
key 的注意事項：

• key 的類型只能是 Number/String

• key 值必須具有唯一性

• 建議循環的列表有一個屬性當 key（該屬性的值在此列表中唯一）

• 不使用索引當 key

• 建議使用 v-for 指令時一定要指定 key 的值

// 組合式
<script setup>
import { ref } from 'vue'
// 課程
let subject = ref([
    { id: 1, name: 'Vue' },
    { id: 2, name: 'Java' },
    { id: 3, name: 'Hadoop' }
])

// 添加課程
function addSubject() {
    // （數組最前面）添加
    subject.value.unshift({ id: 4, name: 'Python' })
}
</script>

<template>

    <button @click.once="addSubject">添加課程（數組最前面）</button>

    <h4>不使用key值</h4>
    <ul>
        <li v-for="sub in subject">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h4>使用索引當key值</h4>
    
    <ul>
        <li v-for="(sub, index) in subject" :key="index">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

    <hr>

    <h4>使用列表屬性當key值（該屬性必須再此列表中唯一）</h4>
    
    <ul>
        <li v-for="sub in subject" :key="sub.id">
            <input type="checkbox">
            {{ sub }}
        </li>
    </ul>

</template>

到此，關于“Vue3中的模板語法怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！