【第二讲】Vue3.x绑定数据、绑定html、绑定属性、循环数据

1.1、Vue3.x绑定数据

业务逻辑：

export default {
    name: "App",
    data() {
        return {
            msg: "你好vue",
            userinfo: {
                username: "张三",
                age: 20
            }
        };
    },
};

template模板：

<template> 

  <p>msg的值：{{ msg }}</p>

  <p>绑定对象：{{ userinfo.username }}</p>
 
</template>

1.2、Vue3.x v-html绑定html

业务逻辑：

export default {
    name: "App",
    data() {
        return {
            h2: "<h2>这是一个html内容</h2>"
        };
    },
};

template模板：

<span v-html="h2"></span>

1.3、Vue3.x v-bind绑定属性

业务逻辑：

export default {
    name: "App",
    data() {
        return {
            logoSrc: "https://www.itying.com/themes/itying/images/logo.gif"
        };
    },
};

template模板：

1、绑定属性的第一种写法v-bind:

<img v-bind:src="logoSrc" alt="logo">

2、绑定属性的第二种写法:

<img :src="logoSrc" alt="logo">

1.4、v-bind动态参数

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

这里attributeName将被动态地评估为JavaScript表达式，并且其评估值将用作参数的最终值。例如，如果您的组件实例具有一个数据属性attributeName，其值为"href"，则此绑定将等效于v-bind:href

业务逻辑：

export default {
    name: "App",
    data() {
        return {
           attributeName: "href",
           linkUrl: "http://www.itying.com",
        };
    },
};

template模板：

<a v-bind:[attributeName]="linkUrl"> 这是一个地址 </a>
或者
<a :[attributeName]="linkUrl"> 这是一个地址 </a>

1.5、v-for循环数组

业务逻辑：

export default {
    name: "App",
    data() {
        return {
            list1: ['马总', '刘总', '李总'],
            list2: [{
                    'title': '新闻111'
                },
                {
                    'title': '新闻222'
                },
                {
                    'title': '新闻33'
                },
                {
                    'title': '新闻44'
                }
            ],
            list3: [{
                    "cate": "国内新闻",
                    "list": [

                        {
                            'title': '国内新闻11111'
                        },
                        {
                            'title': '国内新闻2222'
                        }
                    ]
                },
                {
                    "cate": "国际新闻",
                    "list": [

                        {
                            'title': '国际新闻11111'
                        },
                        {
                            'title': '国际新闻2222'
                        }
                    ]
                }

            ]

        };
    },
};

template模板：

注意vue3.x中循环数据需要制定key，代码如下

<ul>
    <li v-for="(item,index) in list1" :key="index">
        {{item}}
    </li>
</ul>

<ul>
    <li v-for="(item,index) in list2" :key="index">
        {{item.title}}
    </li>
</ul>

<ul>
    <li v-for="(item,index) in list3" :key="index">
        {{item.cate}}
        <ol>
            <li v-for="(news,i) in item.list" :key="i">
                {{news.title}}
            </li>
        </ol>

    </li>
</ul>

1.6、v-for循环对象

业务逻辑：

export default {
    name: "App",
    data() {
        return {           
 			myObject: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2020-03-22'
            }
        };
    },
};

template模板：

<ul id="v-for-object" class="demo">

  <li v-for="(value, name, index) in myObject" :key="index">
  	 {{ name }}: {{ value }}--{{index}}
  </li>
</ul>