【问题标题】: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-例如,这是您需要的吗?看看吧
猜你喜欢
  • 1970-01-01
  • 2012-06-22
  • 2015-02-20
  • 1970-01-01
  • 1970-01-01
  • 2010-12-03
  • 1970-01-01
  • 1970-01-01
  • 2017-11-10
相关资源
最近更新 更多