vue.js - 当在一个组件中使用v-for属性时，如何在v-for 里面的dom对象中绑定组件本身的属性

问题描述

问 题

我就直接上代码吧

<template>
  <div class="step">
    <div class="section" v-for="(a, index) in arr">
      <span class="left" v-if="index!=0"></span>
      <div class="circle" @click="changeColor" :style="self.s.b">
        <span>{{ index+1 }}</span>
      </div>
      <span class="right" v-if="index!=arr.length-1"></span>
      <p :style="self.s.p">{{ a }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ['arr'],
  data () {
    return {
      self: this,
      gray: '#B2B5B9',
      blue: 'rgb(134, 153, 223)',
      s: {
        p: {
          color: 'B2B5B9'
        },
        b: {
          background: 'B2B5B9'
        }
        
        
        
       核心代码，就是让那个p标签绑定底下的属性。求大神

解决方案

直接使用就好了，data, methods 這些會自動注入當前 scope。

<template>
<div class="step">
    <div class="section" v-for="(a, index) in arr">
        <span class="left" v-if="index!=0"></span>
        <div class="circle" @click="changeColor" :style="s.b">
        <span>{{ index+1 }}</span>
    </div>
    <span class="right" v-if="index!=arr.length-1"></span>
    <p :style="s.p">{{ a }}</p>
</div>
</div>
</template>

<script>
export default {
    props: ['arr'],
    data () {
        return {
            gray: '#B2B5B9',
            blue: 'rgb(134, 153, 223)',
            s: {
                p: {
                    color: '#B2B5B9'
                },
                b: {
                    background: '#B2B5B9'
                }
            }
        }
    }
}
</script>

这篇关于vue.js - 当在一个组件中使用v-for属性时，如何在v-for 里面的dom对象中绑定组件本身的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！