javascript 在Vue 3模板中使用带有v-for的变量

whhtz7ly 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(196)

当我将{{num_bottom}}更改为5时，此代码可以正常工作，但我更喜欢使用变量。您能否建议它不正确的原因以及如何修复它？我使用的是Vue 3。

<template>

            <tr class="row" v-for="rowIdx in Math.ceil(items.length / {{num_bottom}})">

</template>

  <script  setup>   
   const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
   let num_bottom = 5    
  </script>

如果我将{{num_bottom}}更改为数字（如3），它会起作用。我希望使用变量，这样我就可以在一个位置更改它，并且它会影响所有内容。

JavaScript

来源：https://stackoverflow.com/questions/74905109/using-a-variable-with-v-for-in-vue3-template

1条答案

按热度按时间

guicsvcw1#

按照您的写法，num_bottom被视为字符串而不是变量。
为了修正你的错误，删除num_bottom周围的花括号。确保num_bottom在templates作用域内，你可以通过在setup函数中声明它来做到这一点。

<template>
  <tr class="row" v-for="rowIdx in Math.ceil(items.length / num_bottom)">
</template>

<script>
  export default {
    setup() {
      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      const num_bottom = ref(5)
      
      return {
        items,
        num_bottom
      }
    }
  }
</script>

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 在Vue 3模板中使用带有v-for的变量

1条答案

相关问题

热门标签

最新问答