VUE分支循环结构
2023-06-03 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-bloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-bloak>
<div v-if='score>=90'>good</div>
<div v-else-if='score<90 && score>=80'>little good</div>
<div v-else-if='score<80 && score>=60'>no good</div>
<div v-else-if='score<60'>bad</div>
<div v-show = 'flag'>
test
</div>
<ul>
<li v-for='item in fruits' v-text='item'></li>
<li v-for='(item,index) in fruits' >{{item}}---{{index}}</li>
<li :key='item.id' v-for='item in myFruits' >
<span>{{item.ename}}-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
<button v-on:click="handel">click</button>
<div v-if='v==18' v-for='(v,k,i) in obj'>{{v+'----'+k+'----'+i}}</div>
</div>
<script src="./vue/vue.js"></script>
<script>
/**
* v-bloak 防止页面闪烁
* v-if 是否渲染到页面
* v-else-if
* v-show 控制的是display，是否已经显示
* */
var vm = new Vue({
el:'#app',
data:{
score:50,
flag:true,
fruits:['apple','orange','banana'],
myFruits:[{
id:1,
ename:'apple',
cname:'苹果'
},
{
id:2,
ename:'orange',
cname:'橙子'
},
{
id:3,
ename:'banana',
cname:'香蕉'
}],
obj:{
uname:"孙悟空",
age:18,
gender:"man"
}
},
methods:{
handel:function(){
this.flag=!this.flag;
}
}
});
/**
v-for遍历数组，也可以遍历对象（实际上应该是关联数组）
key的作用可以帮助Vue区分不同的元素提高性能
* */
// v-if和v-for的结合使用
// 原生js代码
var obj={
uname:"孙悟空",
age:18,
gender:"man"
}
for(var key in obj){
console.log(obj[key]);
}
</script>
</body>
</html>
小示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=" initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
}
ul{
margin-bottom: 0px;
}
.ment{
display:inline-block;
width: 50px;
height: 30px;
color: #777;
font-size: 20px;
border: 1px blue solid;
line-height: 30px;
padding-left: 8px;
list-style: none;
}
.cur{
background-color: tomato;
}
.a{
display: none;
}
.now{
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li :key='item.id' class="ment" :class='curIndex == index?"cur":""' v-on:click="change(index)" v-for='(item,index) in obj'>{{item.name}}</li>
</ul>
<div class="a" :class='curIndex == index?"now":""' v-for='(item,index) in obj'>
<img :src='item.img' alt="">
</div>
</div>
<script src="./vue/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
curIndex:0,
obj:[{
id:1,
name:"苹果",
img:"./img/3.jpg"
},
{
id:2,
name:"柠檬",
img:"./img/2.jpg"
},
{
id:3,
name:"香蕉",
img:"./img/4.jpg"
}]
},
methods:{
change:function(index){
this.curIndex = index;
}
}
});
</script>
</body>
</html>
