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/vue@2.js"></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>

Vue Js v-for 使用

1 个答案: