Vue.js 可以将v-for与:value一起使用

Vue.js 可以将v-for与:value一起使用,vue.js,v-for,Vue.js,V For,我不明白为什么不能用:value={{{item.level}替换:value=MYVALUE。 有人能给我解释一下吗 <v-progress-circular v-for="item in Webs" :key="item.name" :rotate="-90" :size="100" :width="15" :value=70

我不明白为什么不能用:value={{{item.level}替换:value=MYVALUE。 有人能给我解释一下吗

 <v-progress-circular v-for="item in Webs" :key="item.name"
                :rotate="-90"
                :size="100"
                :width="15"
                :value=70
                color="primary"
            >
                {{ item.name }}
            </v-progress-circular>
        <script>
      export default {
        name: 'Test',
        data() {
          return {
                Webs: [
                    {
                        logo: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.blog-nouvelles-technologies.fr%2F2312%2Fhtml5-ou-html-la-question-se-pose%2F&psig=AOvVaw2SaUGiuxy1TtXH7KAHefnq&ust=1589414369428000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCIiV7ojEr-kCFQAAAAAdAAAAABAZ',
                        name: 'html',
                        level: 70,
                    }
                ],

            }
        }
      }
    </script>

可以肯定地将任何动态值与:value属性一起使用,或者将其与v-model说明符绑定,或者将其用作:value

正确的版本如下:

<template>
    <v-progress-circular 
    v-for="item in Webs" 
    :key="item.name"
    :rotate="-90"
    :size="100"
    :width="15"
    :value="item.level"
    color="primary">

    {{ item.name }}
  </v-progress-circular>
</template>
<script>
      export default {
        name: 'Test',
        data() {
          return {
                Webs: [
                    {
                        logo: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.blog-nouvelles-technologies.fr%2F2312%2Fhtml5-ou-html-la-question-se-pose%2F&psig=AOvVaw2SaUGiuxy1TtXH7KAHefnq&ust=1589414369428000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCIiV7ojEr-kCFQAAAAAdAAAAABAZ',
                        name: 'html',
                        level: 70,
                    }
                ],

            }
        }
      }
</script>
记住引用:value=item.level


希望这会有所帮助。

:value=item.level表示v-bind:value=item.level,“v-bind:”后面的值是被动的,胡须中的值也是被动的。如果它们同时存在,Vue将无法做出反应。这取决于Vue的定义,它应该是:value=item.level,类似于键的定义。你不用{{…}}和v-bind一起使用,它们是用来输出文本内容,而不是设置属性的。嗨,Emma,谢谢你的尝试。但这是一个简单的语法问题。你的解释就是不正确。