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、绑定属性、循环数据的简单介绍～