如何解决Vue Js v-for 使用
我是 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/vue@2.js"></script>
<script src="./static/js/app.js"></script>
解决方法
您可以做的是将背景颜色和描述添加到 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。