Vue Js v用于使用

Question

我是vue.js的初学者。我想在html中使用v-for从app.js获取数据，并将其显示在单独的div中。我想为每个待办事项添加独立的背景和独立的文本。

var example = new Vue({
el:"#example",
data: {
todos : [
{id:1 , name: "ŞEHİR MERKEZİ"},
{id:2 , name: "HÜDAİ KAPLICA"},
{id:3 , name: "AFYONKARAHİSAR"}

]
}
})

<div class="container" id="example">
<div class="row">
<div class="col-lg-6">
<div class="flip flip-vertical">
<div
class="front"
style="background: url(./static/images/sandıklı.jpg)">
<h1 class="text-shadow" >
<div class="hborder"  v-for="todo in todos" :key="todo">
{{todo.name}}
</div>
</h1>
</div>
<div class="back">
<h4>ŞEHİR MERKEZİ GÜZERGAHINI ONAYLIYOR MUSUNUZ ?</h4>
<button type="button" class="btn btn-primary btn-lg">EVET</button>
<button type="button" class="btn btn-danger btn-lg">HAYIR</button>
</div>
</div>
</div>
</div>
</div>
<script src="./static/js/[e-mail]"></script>
<script src="./static/js/app.js"></script>

Answer 1

您可以做的是将背景颜色和描述添加到todos对象中。此外，我对您的数据功能做了一些更改。

var example = new Vue({
el:"#example",
data() {
return {
todos : [
{id:1 , name: "ŞEHİR MERKEZİ", bg: '#FFF', desc: 'desc1'},
{id:2 , name: "HÜDAİ KAPLICA", bg: '#ff0000', desc: 'desc2'},
{id:3 , name: "AFYONKARAHİSAR", bg: '#cecece', desc: 'desc3'}

]
}
}
})

<div class="container" id="example">
<div class="row">
<div class="col-lg-6">
<div class="flip flip-vertical">
<div
class="front"
style="background: url(./static/images/sandıklı.jpg)">
<h1 class="text-shadow" >
<div class="hborder"  v-for="todo in todos" :key="todo" :style="background-color: todo.bg;">
{{todo.name}}
{{todo.desc}}
</div>
</h1>
</div>
<div class="back">
<h4>ŞEHİR MERKEZİ GÜZERGAHINI ONAYLIYOR MUSUNUZ ?</h4>
<button type="button" class="btn btn-primary btn-lg">EVET</button>
<button type="button" class="btn btn-danger btn-lg">HAYIR</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>