方法一:
html:
<div id="my_vue">{{message}}</div>
js:
var my_vue=new Vue({
el:'#my_vue',
data:{
message:'jay'
}
})
方法二:
html:
<div id="my_vue">{{message}}</div>
js:
var x=document.getElementById('my_vue')
var my_vue=new Vue({
data:{
message:'jay'
}
})
my_vue.$mount(x);
添加类名:
一、对象语法：
<div id="app" v-bind:class="{'a':aa,'b':bb}"></div>
data:{
aa: true,
bb: true
}
二、数组语法：
<p v-bind:class="[x,y]"></p>
data:{
x:'a',
y:'b'
}
添加html:
<p v-html="xm"></p>
data:{
xm:'<div>我是插入的div</div>'
}
<!--添加css样式-->
方法一：
<p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p>
data:{
my_color:'red',
my_font:20+'px'
}
方法二：
<p v-bind:style="my_style">啊，你再说一次</p>
data:{
my_style:{
color:'yellow',
fontSize:25+'px'
}
}
方法三：
<p v-bind:style="[my_style,my_style2]">你还是傻逼</p>
data:{
my_style:{
color:'yellow',
fontSize:25+'px'
},
my_style2:{
background:'red'
}
}
v-if:
<h1 v-if="ok">{{name}}</h1>
data:{
name: 'jay',
ok: true
}
v-show:
<h2 v-show="show">{{name}}</h2>
data:{
name: 'jay',
show: false
}
有空再补上！