一、
v-text:
简写: {{}}
作用:
1、解析数据
2、可以解析JS的表达式
底层原理:应用类似于innerText的方法
<h2 v-text="msg.x"></h2>
<h2>{{msg.y}}</h2>
var vm = new Vue({
el:"#app" ,
data:{
msg:{
x:191011,
y:123
},
}
})
二、
v-html:
作用:
1、解析数据
2、可以解析JS的表达式
底层原理:应用类似于innerHTML的方法( v-html与v-text其实是一样的 只不过v-html可以解析html标签)
<h2 v-html="p"></h2>
var vm = new Vue({
el:"#app" ,
data:{
msg:{
x:191011,
y:123
},
p:"<p>不要睡觉</p>"
}
})
三、
v-show:
作用:
显示/隐藏
当值为true的时候为显示 false的时候为隐藏
底层原理:操作元素的display属性
<div id="app">
<h2 v-show="flag">{{msg}}</h2>
</div>
var vm = new Vue({
el:"#app" ,
data:{
msg:"1910",
flag:true,
p:"<p>不要睡觉</p>"
}
})
四、
v-if:
创建/销毁
当值为true的时候为创建 false的时候为销毁
底层原理是操控元素的创建/销毁
配合v-if使用的指令
(当使用v-else / v-else-if 的时候 必须要使用 v-if)
v-else
v-else-if
<div id="app">
<div v-if="num==1">111</div>
<div v-else-if="num==2">222</div>
<div v-else>333</div>
</div>
var vm = new Vue({
el:"#app",
data:{
flag:false,
num:10
}
})
五、
v-bind:
用来给元素绑定属性
语法:v-bind:属性 = 属性值
简写: :后面跟属性
常用的属性有哪些?
class
id
src
herf
title
type
alt
<div v-bind:id="myId" :title="name"></div>
<img :src="mySrc" alt="">
<a :href="link">{{des}}</a>
<input :type="type.password"><br>
<div :style="style"></div>
<div :class="myclass3.boxA"></div> -->
var vm = new Vue({
el:"#app",
data:{
myId:"box",
mySrc:"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png",
link:"http://www.baidu.com",
name:"1910",
type:{
text:"text",
password:"password",
submit:"submit",
checked:"checked",
radio:"radio"
},
des:"百度",
style:{
width:"100px",
height:"100px",
backgroundColor:"red"
},
myclass:"box box1",
myclass3:{
boxA:true,
boxB:false
},
}
})
六、
v-for:
用来遍历,可以用来遍历任何对象(数组,字符串,对象…)
<div v-for="(item,index) in arr">{{item}}-------{{index}}</div>
<hr>
<div v-for="(item,index) in obj">{{index}}-------{{item}}</div>
<hr>
<div v-for="(item,index) in 5">{{item}}-------{{index}}</div>
<hr>
<div v-for="(item,index) in '1231asx23123'">{{item}}--------{{index}}</div>
var vm = new Vue({
el:"#app",
data:{
arr:[10,20,30,40],
obj:{
username:"youyuxi",
age:28
}
}
})