Vue3 #3

1.v-for:

<ul>
            <li v-for="book in books">
                <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3>
            </li>
</ul>

  javascript:

data() {
        return {
            books: [
                { title: 'wind of name', author: 'The Net Tom', age: '45' },
                { title: 'Rain of name', author: 'The Net Peter', age: '42' },
                { title: 'Wound of name', author: 'The Net Mike', age: '40' }
            ]
        }
    }

2.v-bind:

<a :href="url">the best website</a>

  javascript:

data() {
        return {
            url: 'http://www.google.com/'
        }
    }

  小案例:

<ul>
            <li v-for="book in books">
                <img :src="book.img" :alt="book.title">
                <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3>
            </li>
</ul>

  javascript:

data() {
        return {
            books: [
                { title: 'wind of name', author: 'The Net Tom', age: '45', img: 'assets/1.jpg' },
                { title: 'Rain of name', author: 'The Net Peter', age: '42', img: 'assets/2.jpg' },
                { title: 'Wound of name', author: 'The Net Mike', age: '40', img: 'assets/3.jpg' },
            ]
        }
    }

 

上一篇:注释


下一篇:kotlin 第20个程序(抽象类)