Question

我本质上是在寻找类似的东西：

<div v-for="k in keys" :key="k">
 {{ k }}
 ...
   <div v-with:myvalue="functionOf(k)">
     {{ myvalue }}
   </div>
</div>

我不知道你怎么称呼这种东西，但是我可以告诉我在某些地方有类似的代码，这可能很方便。

Answer 1

您可以使用计算属性来创建将值转换为其他值的函数。

例如，假设您在这里有此代码。

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

您可以添加添加计算属性以运行一些js代码，然后在html模板中调用

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p> //computed function
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

您可以在official documentation

中了解更多信息

带有v-for

的示例

<div v-for="k in keys" :key="k">
 {{ k }}
   <div>
     {{ reversedMessage(k) }}
   </div>
</div>


var vm = new Vue({
  el: '#example',
  computed: {
    // a computed getter
    reversedMessage(k){ //you receive the value for each k you have in keys
      return k.split('').reverse().join('')
    }
  }
})

Vuejs将JSX中的变量与作用域绑定

1 个答案: