Vue3.x模版語法、綁定數據、綁定html、綁定屬性、循環數據

一、Vue中綁定數據

1.1 綁定數據

// template模版
<div>{{ msg }}</div>

// 業務邏輯
export default {
　　data() {
　　　　return {
　　　　　　msg:"你好,Vue!",
　　　　}
　　}
}

1.2 綁定數據對象

// template模版
<p>{{ userInfo.username }}--{{ userInfo.age }}</p>

// 業務邏輯
export default {
　　data() {
　　　　return {
　　　　　　msg:"你好,Vue!",
　　　　　　userInfo: {
　　　　　　　　username: "張三",
　　　　　　　　age: "18",
　　　　　　},　　　　　
　　　　}
　　},
}

二、Vue中綁定html

// template模版
<div>綁定html:<p v-html="setInfo"></p></div>

// 業務邏輯
export default {
　　data() {
　　　　return {
　　　　　　setInfo:"<h2>我是一個html標簽！</h2>",
　　　　}
　　},
}

三、Vue中綁定屬性

3.1

// template模版  【注意：v-bind 縮寫 ：】
<img :src="logoSrc" alt=""> 

// 業務邏輯
export default {
　　data() {
　　　　return {   
　　　　　　logoSrc:"https://static.zcool.cn/git_z/z/common/images/svg/logo.svg",
　　　　}
　　},
}

3.2

// template模版
<div :title="title">鼠標放上去試試</div>

// 業務邏輯
export default {
　　data() {
　　　　return {
　　　　　　title:"自定義屬性值",
　　　　}
　　},
}

四、v-bind動態參數

語法：<a v-bind:[attributeName]="url">...</a>

這里 attributeName 將被動態的評估為js表達式，並且評估值將用作參數的最終值，例如：如果您的組件實例具有一個數據屬性attributeName，其值為"href", 則此綁定將等效於v-bind:href

// template 模版
<template>
    <!-- 綁定動態參數，注意動態參數是靜態字符串，使用單引號括起來的 -->
    <a :[myHref]="'https://www.baidu.com/'">百度</a>
    <br>
    <a :[myHref]="myLink">半白白黑的博客</a>
</template>

// 業務邏輯
export default {
   data() {
      return {
         myHref: "href",
         myLink: "https://i.cnblogs.com/posts/edit;postId=14513254"
      }
   }
}

五、數據循環

5.1  v-for 循環普通數組

// template模版
<div>
    <!-- 注意： vue循環遍歷時，必須綁定key值，否則會報錯 -->
    <ul>
        <li v-for="item in list" :key="item.id">{{item}}</li>
    </ul>
    <!-- 循環普通數組 -->
    <ul>
        <li v-for="(item,index) in list" :key="index">每一項：{{ item }} -- 索引值：{{ index }}</li>
    </ul>
</div>

// 業務邏輯
export default {
    data() {
        return {
            // 數據循環
            list: ["奔馳", "寶馬", "奧迪", "大眾"],
        }
    }
}

5.2 v-for 循環對象數組

// template 模版
<ul>
    <li v-for="(user,index) in list" :key="index">{{ user.id }} -- {{ user.name }} -- 索引值：{{ index }}</li>
</ul>

// 業務邏輯
export default {
    data() {
        return {
            // 數據循環
        　　list: [{
                id: 1,
                name: "james"
            }, {
                id: 2,
                name: "wade"
            }, {
                id: 3,
                name: "paul"
            }],
    　　 }
    }
}

5.3 v-for 循環對象

// template模版
<div>
    <!-- v-for 循環對象 注意：在遍歷對象身上的鍵值對的時候，除了有 val key ，在第三個位置還有一個索引 -->
    <ul>
        <li v-for="(user,key,index) in list" :key="index">值：{{ user }} -- 鍵：{{ key }} 索引值：{{ index }}</li>
    </ul>
</div>

// 業務邏輯
export default {
    data() {
        return {
            list: {
                id: 1,
                name: "鯨魚🐳",
                sex: "男"
        　　},
        }
    }
}

5.4 v-for 迭代數字

// template模版
<div>
    <!-- v-for迭代數字 in 后面我們放過普通數組，對象數組，對象，還可以放數字 -->
    <ul>
        <li v-for="(user,index) in 6" :key="index">這是第{{ user }}循環</li>
    </ul>
</div>

5.5 嵌套數據的獲取

// template模版
<div>
    <!-- 嵌套數據的獲取 -->
    <ul>
        <li v-for="(news,index) in list" :key="index"> {{ news.cate }}
        　　<div>
        　　　　<p v-for="(menu,i) in news.list2" :key="i">{{ menu.title }}</p>
        　　</div>
    　　</li>
    </ul>
</div>

// 業務邏輯
export default {
　 data() {
      return {
         list: [{
             cate: "國內新聞",
             list2: [{
                title: "國內新聞111"
             }, {
                title: "國內新聞222"
             }, {
                title: "國內新聞333"
             }]
         }, {
             cate: "國外新聞",
             list2: [{
                title: "國外新聞111"
             }, {
                title: "國外新聞222"
             }, {
                title: "國外新聞333"
             }]
         }],
      }
   }
}

以上就是Vue3.x模版語法、綁定數據、綁定html、綁定屬性、循環數據的簡單介紹～