Vue.js传递道具动态更改组件类

时间:2018-03-15 15:27:58

标签: vue.js vuejs2 vue-component

我试图学习Vue并遇到了这个问题。



Vue.component('alert', {
  props: ['type', 'bold', 'msg'], template: '<div class="alert alert-{{ type }}" role="alert"><b>{{ bold }}</b> {{ msg }}</div>'
});

var componentProps=new Vue( {
    el: '#app',
  }

);
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app" class="container">
  <alert type="info" bold="Greetings." msg="This is some information."></alert>
  <alert type="warning" bold="Slow down." msg="You might crash."></alert>
  <alert type="danger" bold="Oh no!" msg="The program just crashed!"></alert>
  <alert type="success" bold="Rock Out" msg="with your Props out!"></alert>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
&#13;
&#13;
&#13;

这是在检查员的输出中。你可以看到道具[类型]在那里没有改变。

<div role="alert" class="alert alert-{{ type }}'"><b>Slow down.</b> You might crash.</div>

指向codepen =&gt;的链接https://codepen.io/dakata911/pen/XEKbyq?editors=1010

2 个答案:

答案 0 :(得分:5)

在第2期你can't use interpolations in attributes anymore。你现在有several possible syntaxes for class and style bindings。在您的具体情况下,您可以使用:

<div class="alert" :class="'alert-' + type" role="alert">

下面的演示。

&#13;
&#13;
new Vue({
  el: '#app',
  data: {
    type: 'warning'
  }
})
&#13;
.alert { background: yellow; }
.alert-warning { color: red }
&#13;
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="alert" :class="'alert-' + type" role="alert"> Warning! </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

在属性插值不起作用时,您可以使用:class="type"绑定

:class="[ type, other, ... ]"

:class="{ 'someClass': true, 'other-class': false, 'another': method() }"

:class="..."

您可以在同一元素/标记上同时拥有class="normal class attribute"个属性和{{1}}