2. Vue3綁定數據


1.1、Vue3綁定數據

業務邏輯:

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 v-html綁定html

業務邏輯:

export default { name: "App", data() { return { h2: "<h2>這是一個html內容</h2>" }; }, };

template模板:

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

1.3、Vue3 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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM