Javascript

Vue3 #3

本文主要是介绍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' },
            ]
        }
    }

 

这篇关于Vue3 #3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航