Question

如何在v-show或v-if指令中获取属性值？我已经试图像下面的例子一样传递，但没有成功。

v-show="cabin >= {{ number }}" number="5"

我坚持这一点，因为vue.js它很难找到文档和示例。

Answer 1

如果您正在使用Vue组件，那么您可以执行以下操作：

Vue.Component('my-comp', {

    template: '#my-template',

    props: [
        'number',
    ],
    data: function(){
        return{
            cabin: 4
        };
    }
}):

然后在您看来，像这样使用它：

<my-comp v-show="cabin >= number" number="5"></my-comp>
<template id="my-template">
    <div>Lorem Ipsum</div>
</template>

Answer 2

使用自定义属性（number）后，我猜你使用了一个组件。

所以，正如他所说@ user3324298，你需要这样的东西：

Vue.Component('my-comp', {
  template: '#my-template',

  props: ['number'],

  data: function() {
    return {
      cabin: 4
    }
  }
})

但模板应该是这样的：

<template id="my-template">
    <div v-show="cabin >= number" number="5">
        <div>Lorem Ipsum</div>
    </div>
</template>

<my-comp></my-comp>

v-show应该进入组件范围。

如何将属性传递给vue js上的指令？

2 个答案: