6.vue中的条件渲染&列表渲染
2018-07-07 本文已影响8人
yaoyao妖妖
1.vue中的条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue条件渲染</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<!-- v-if="show"根据show变量的boolen值判断这个Dom是否显示，false时根本不存在dom -->
<!-- v-if和v-else要紧贴着使用 -->
<div v-if="show" > {{message}} </div>
<div v-else> Bye World </div>
<!-- v-show="show"根据show变量的boolen值判断这个Dom是否显示，false时存在dom，只是display隐藏，效率更高 -->
<div v-show="show" data-test="v-show"> {{message}} </div>
<!-- 三者要紧贴着使用 -->
<div v-if="show === 'a'" > This is a</div>
<div v-else-if="show === 'b'"> This is b </div>
<div v-else > This is others</div>
<!-- key值 防止因为复用Dom出现的内容没有清空-->
<div v-if="show" > 用户名:<input key="username"/> </div>
<div v-else> 邮箱名:<input key="youxiang"/> </div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{//定义一组数据
show:false,
message:"hello world"
},
methods:{
handleDivClick:function(){
}
}
})
</script>
</body>
</html>
2.vue中的列表渲染&dom循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue列表渲染</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<!-- 尽量不要使用index作为key值 -->
<div v-for="(item,index) of list"
:key="item.id">{{item.text}}---{{index}}
</div>
<!-- template在这里只是一个占位符，包裹里面的循环内容，但是并不会多一个div的壳子 -->
<template v-for="(item,index) of list"
:key="item.id">
<span>{{item.text}}</span>
<div>{{item.text}}</div>
</template>
</div>
<script>
//1.在vue中只能通过下面7个方法操作数组才能实现实时的更改页面对应的值
//push加入一个元素 pop删除一个元素 shift unshift splice截取数组 sort数组排序 reverse数组取反
//2.或者改变引用
//app.list= 一个新的数组
//3.或者set方法
//app.$set(app.userInfo,"address","Beijing")对象
//app.$set(app.userInfo,1，5)下标为1，数组
//Vue.set(app.userInfo,1，5)
el:'#app',
data:{
list:[{
id:"0000",
text:"hello"
},
{
id:"0001",
text:"dell"
},
{
id:"0002",
text:"nice"
},
{
id:"0003",
text:"to"
},
{
id:"0004",
text:"meet"
},
{
id:"0005",
text:"you"
}],
},
methods:{
handleDivClick:function(){
}
}
})
</script>
</body>
</html>
3.对象循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue对象循环</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
<!-- 尽量不要使用index作为key值 -->
<div v-for="(item,key,index) of userInfo">
{{item}}-- {{key}}--- {{index}}
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
userInfo:{
name:"dell",
sex:"man",
age:28
}
},
methods:{
handleDivClick:function(){
}
}
})
</script>
</body>
</html>
