Vuejs在JSX中绑定变量与范围答案

【问题标题】：Vuejs bind variable in JSX with scopeVuejs在JSX中绑定变量与范围
【发布时间】：2019-05-21 08:46:12
【问题描述】：

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

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

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

【问题讨论】：

你到底想做什么？请提出问题，以便我们为您提供帮助
你的问题真的很难理解。你能澄清一下你想要做什么吗？
@Jalil 我正在为 'v-with' 指令寻找类似的功能，这是虚构的 - 本质上是缓存 v-for 指令提供的用于相应范围的变量的函数跨度>

标签： javascript vue.js jsx

【解决方案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('')
    }
  }
})

【讨论】：

当然你也可以发送一些参数比如你的K对象在v-for中使用它
但是你不能动态地在每个 for 循环迭代中拥有一个
您需要为每个值设置不同的行为吗？
我需要每个值的统一行为。看看原来的问题sn -p。我知道计算属性已经可以做什么
我修改了答案以添加一个 v-例如，这是您需要的吗？看看吧