分支循环结构
分支结构
-
v-if
-
v-else
-
v-else-if
-
v-show:v-show的原理:控制元素样式是否显示display : none
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支结构</title> </head> <body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else-if='score<80&&score>=60'>一般</div> <div v-else>差</div> <div v-show='flag'>测试v-show</div> <button v-on:click='handle'>点击</button> </div> <script src="js/vue.js"></script> <script> /* v-show的原理:控制元素样式是否显示display : none */ var vm = new Vue({ // el:告诉vue把数据插入到哪个位置 el: "#app", // data: 提供数据 data: { score: 100, flag: false }, methods: { handle: function(){ // 取反 this.flag = !this.flag; } } }) </script> </body> </html>
v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示(已经渲染到了页面)
循环结构
-
v-for遍历数组
<li v-for=' item in list '>{{item} }</ li>
<li v-for='(item, index) in list'>{ {item} } + '---' +{ {index} }</li>
-
key的作用︰帮助Vue区分不同的元素,从而提高性能
<li : key='item.id' v-for=' (item,index) in list'>{{item} } + '---' { findex}}</li>
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环结构</title>
</head>
<body>
<div id="app">
<h3>水果列表</h3>
<ul>
<!--
item 循环变量
in 关键字
fruits 你要遍历的数据结构
-->
<li v-for='item in fruits'>{{item}}</li>
<!-- index关键字 - 显示索引 -->
<!-- <li v-for='(item,index) in fruits'>{{item + '----' + index}}</li> -->
<li v-for='(item,index) in fruits'>{{item + '----' + index}}</li>
<!-- <li v-for='item in myFruites'>
<span>{{item.ename}}</span>
<span>----</span>
<span>{{item.cname}}</span>
</li> -->
<!-- 使用key关键字: 与上面的结果是一样的,但是可以提高性能 -->
<li :key='item.id' v-for='(item,index) in myFruites'>
<span>{{item.ename}}</span>
<span>----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
// el:告诉vue把数据插入到哪个位置
el: "#app",
// data: 提供数据
data: {
fruits: ['apple','orange','banana'],
myFruites: [{
id:1,
ename: 'apple',
cname: '苹果'
},
{
id:2,
ename: 'banana',
cname: '香蕉'
},
{
id:3,
ename: 'orange',
cname: '橘子'
}]
}
})
</script>
</body>
</html>
-
v-for遍历对象
值 键 索引 这个顺序是不能变的,变量名可以自定义
<div v-for=' ( value,key,index) in object'></ div>
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>循环结构</title> </head> <body> <div id="app"> <!-- 值 键 索引 这个顺序是不能变的,变量名可以自定义 --> <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script src="js/vue.js"></script> <script> // 使用原生js遍历对象 var obj = { uname: 'lisi', age: 12, gender: 'male' } for (var key in obj) { console.log(key, obj[key]) } // var vm = new Vue({ // el:告诉vue把数据插入到哪个位置 el: "#app", // data: 提供数据 data: { obj : { uname: 'lisi', age: 12, gender: 'male' } } }) </script> </body> </html>
-
v-for遍历对象
<div v-if='value==12' v-for='(value,key,index) in object'></div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>循环结构</title> </head> <body> <div id="app"> <!-- 值 键 索引 这个顺序是不能变的,变量名可以自定义 --> <!-- <div v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> --> <!-- 只有符合if条件的数据才能被遍历 --> <div v-if='v===13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script src="js/vue.js"></script> <script> // 使用原生js遍历对象 var obj = { uname: 'lisi', age: 12, gender: 'male' } for (var key in obj) { console.log(key, obj[key]) } // var vm = new Vue({ // el:告诉vue把数据插入到哪个位置 el: "#app", // data: 提供数据 data: { obj : { uname: 'lisi', age: 13, gender: 'male' } } }) </script> </body> </html>