vuejs - rendering class

Question

This is my iview Message function that renders popup message.

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

The CSS

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

However, I need to render a class for the span instead of the whole div.

Any ways to render only the span?

Pierre Said · Accepted Answer · 2019-12-10 09:53:57Z

1

Put the class object in the span element instead of the div element.

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

Example :

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>

edited Dec 10, 2019 at 9:53

answered Dec 10, 2019 at 9:39

Pierre Said

3,8901 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hatched Over a year ago

Hi, I need to apply the css for the word in the span only , instead of the whole sentence

tony19 · Accepted Answer · 2022-09-06 19:29:02Z

0

class should be an array, not a string:

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

Vue docs

edited Sep 6, 2022 at 19:29

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 16, 2021 at 18:35

jarraga

4486 silver badges9 bronze badges

Collectives™ on Stack Overflow

vuejs - rendering class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related