js代码转vue

js代码

< div class = "jumbotron" >

< h1 id = "step1" > HTML in tooltip </ h1 >

< p id = "step4" class = "lead" > We're going to use HTML codes in tooltips via Programmatic API </ p >

< a class = "btn btn-large btn-success" href = "javascript:void(0);" @click = " startIntro() " > Show me how </ a >

</ div >

// function startIntro(){

// var intro = introJs();

// intro.setOptions({

// steps: [

// {

// element: '#step1',

// intro: "This is a <b>bold</b> tooltip."

// },

// {

// element: '#step2',

// intro: "Ok, <i>wasn't</i> that fun?",

// position: 'right'

// },

// {

// element: '#step3',

// intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',

// position: 'left'

// },

// {

// element: '#step4',

// intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",

// position: 'bottom'

// },

// {

// element: '#step5',

// intro: '<strong>Get</strong> it, <strong>use</strong> it.'

// }

// ]

// });

// intro.start();

// }

vue语法

< div class = "jumbotron" >

< h1 id = "step1" > HTML in tooltip </ h1 >

< p id = "step4" class = "lead" > We're going to use HTML codes in tooltips via Programmatic API </ p >

< a class = "btn btn-large btn-success" href = "javascript:void(0);" @click = " startIntro() " > Show me how </ a >

</ div >

import mintro from 'intro.js'

methods: {

startIntro() {

var introjs = mintro.introJs()

introjs.setOptions({

steps: [

{

element: '#step1' ,

intro: "This is a <b>bold</b> tooltip."

},

{

element: '#step2' ,

intro: "Ok, <i>wasn't</i> that fun?" ,

position: 'right'

},

{

element: '#step3' ,

intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.' ,

position: 'left'

},

{

element: '#step4' ,

intro: "<span style='font-family: Tahoma'>Another step with new font!</span>" ,

position: 'bottom'

},

{

element: '#step5' ,

intro: '<strong>Get</strong> it, <strong>use</strong> it.'

}

]

});

introjs.start()

}

}

}