gpt4 book ai didi

javascript - Vuejs只输出一张表和几行

转载 作者:行者123 更新时间:2023-12-01 01:01:38 27 4
gpt4 key购买 nike

学习Vue:

<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
</style>
</head>
<body>
<div id="app">
<friends v-for="friend in friends" :friend="friend"></friends>
</div>
<script>
Vue.component('friends', {
props : ['friend'],
template : `<table>
<tr><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
</table>`,
})

const vm = new Vue({
el : '#app',
data : {
friends : [
{fname : 'Cornelius', lname : 'Johnson'},
{fname : 'John', lname : 'Waybe'},
{fname : 'Neo', lname : 'Anderson'},
],
}
})
</script>
</body>
</html>

这工作正常,但它输出多个表与一个表及其行。

我尝试过这样的事情

    <div id="app">
<friends></friends>
</div>

Vue.component('friends', {
props : ['friends'],
template : `<table>
<tr v-for="friend in friends" :friend="friend"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
</table>`,
});

const vm = new Vue({
el : '#app',
data : {
friends : [
{fname : 'Cornelius', lname : 'Johnson'},
{fname : 'John', lname : 'Waybe'},
{fname : 'Neo', lname : 'Anderson'},
],
}
})

但这只是输出一个空表。

如何只输出一个表及其行?

最佳答案

您应该将 friend 传递给 friend 属性 =)。

<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
</style>
</head>
<body>
<div id="app">
<friends :friends="friends"></friends>
</div>
<script>
Vue.component('friends', {
props : ['friends'],
template : `<table>
<tr v-for="friend in friends"><td>{{ friend.fname }}</td><td>{{ friend.lname }}</td></tr>
</table>`,
})

const vm = new Vue({
el : '#app',
data : {
friends : [
{fname : 'Cornelius', lname : 'Johnson'},
{fname : 'John', lname : 'Waybe'},
{fname : 'Neo', lname : 'Anderson'},
],
}
})
</script>
</body>
</html>

关于javascript - Vuejs只输出一张表和几行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56013599/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com