Vue3 #3
Posted SuperToretto
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3 #3相关的知识，希望对你有一定的参考价值。
1.v-for：
<ul> <li v-for="book in books"> <h3>{{ book.title }} - {{ book.author }} - {{ book.age }}</h3> </li> </ul>
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的主要内容，如果未能解决你的问题，请参考以下文章