vuejs - 渲染 class

Question

这是我的 iview Message 呈现弹出消息的函数。

    this.$Message.info({
                render: h => {
                    return h('div', {class:"red"}, [
                        'This is created by ',
                        h('span', 'render'),
                        ' function'
                    ])
                }
            });

CSS

.red{
  color:red;
  background:blue;
}

但是，我需要为 span 渲染一个 class 而不是整个 div。

有什么方法可以只渲染 span?

Answer 1

将 class 对象放在 span 元素而不是 div 元素中。

this.$Message.info({
  render: h => {
    return h("div", 
    [
      "This is created by ", 
      h("span", {class : "red" }, "render function ")
    ])
  }
});

示例：

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  render: h => {
    return h("div", 
    [
      "This is created by ", 
      h("span", {class : "red" }, "render function ")
    ])
  }
})

.red {
  color:red;
  background:blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app">
</div>

Answer 2

class 应该是数组，不是字符串：

h('div', {class: ['red']})

Vue docs

vuejs - 渲染 class

vuejs - rendering class

javascript

vue.js

iview