1.插值表达式
插值表达式:数据绑定【插值表达式中一般指定变量,也可以指定表达式等等。】
插值闪烁
当数据不是预定义的时候,而是通过网络进行获取的,那么当网络延迟加载时,页面中会显示插值表达式的语法,等网络加载完毕后,数据进行渲染,这种现象称之为:插值闪烁
2.v-text&v-html
<div id="app">
<h1 v-text="name"></h1>
<h2 v-text="age"></h2>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"王向晚",
age:`<a href="www.baidu.com">百度</a>`
}
})
</script>
<div id="app">
<h1 v-html="name"></h1>
<h2 v-html="age"></h2>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"王向晚",
age:`<a href="www.baidu.com">百度</a>`
}
})
</script>
v-text不能读取标签 而v-html可以读取标签
3.v-if&v-show
v-if
<div id="app">
<h1>吃饭了吗?</h1>
<h1 v-if="ob">吃了</h1>
<h1 v-else-if="ob">没吃</h1>
<h1 v-else>没吃</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
ob:false,
}
})
</script>
v-show
<div id="app">
<!-- 今天做核酸了吗?-->
<h1>今天做核酸了吗?</h1>
<h1 style="color: green" v-show="bo">做核酸了</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
bo:true
}
});
</script>
v-if于v-show的区别
v-if只有条件达成时会创建标签,v-show无论是否达成都会创建标签 只是通过操作css来显示隐藏
4.v-for
循环遍历数据
v-if不要和v-for同时在同一个元素上使用
1.遍历普通数组
<div id="app">
<ul>
<li v-for="(item,index) in array">{{item}}>>>>>{{index}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
array:["张三","李四","王五","尼日"]
}
})
</script>
2.遍历对象数组
<div id="app">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in array">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
array:[
{
name:"张三",
age:18,
sex:"男"
},
{
name:"李四",
age:28,
sex:"男"
},
{
name:"小六子",
age:16,
sex:"男"
},
{
name:"建房",
age:18,
sex:"男"
},
{
name:"翠花",
age:18,
sex:"女"
},
]
}
})
</script>
3.遍历对象
<div id="app">
<ul v-if="obj.code==200">
<li v-for="(item,steat,index) in obj">{{item}}>>>{{steat}}>>>{{index}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
obj:{
code:200,
message:"查询成功",
array:"思雨"
}
}
})
</script>
5.v-on
事件绑定
JavaScript中的onClick
jQuery中的click()
vue中的v-on:click
<div id="app">
<h1>{{message}}</h1>
<button v-on:click="alert(11)">点击事件</button>
<button v-on:click="getData(11)">点击事件获取数据</button>
<button v-on:click="setData('我真的服了')">点击事件获取数据</button>
<button @click="getData('艹')">点击事件获取数据</button>
<button @click="setData('我真的服了')">点击事件获取数据</button>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"真的吗?"
},
methods:{
getData(params){
alert(params)
},
setData(params){
this.message=params;
}
}
})
</script>