第二講、Vue3.x繫結資料、繫結html、繫結屬性、迴圈資料

frans發表於2021-01-04
VueHTML

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>
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章