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' },
            ]
        }
    }

 3.Dynamic classes：

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



<style>
li.fav {
            background: #ff9;
        }
</style>

  javascript：

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

4.computed properties

<ul>
            <li v-for="book in filteredBooks" :class="{ fav: book.isFav }" @click="toggleFav(book)">
                <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3>
            </li>
</ul>

javascript：

computed: {
        filteredBooks() {
            return this.books.filter((book) => book.isFav)
        }
    }