- 技术
- vue的分支及循环结构
您可以在编辑器中c,v以下内容,即可查看(vue文件请自行到官网下载)
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>Document
</title
>
<script src
="./vue.js"></script
>
</head
>
<body
>
<div id
="app">
<!-- 分支v
-if条件不满足不会渲染dom
-->
<div
>
<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
>
<hr
>
<!-- v
-show条件不满足也会渲染dom只是把内容隐藏了
-->
<div v
-show
="flag">测试v
-show
</div
>
<button @click
="hide">点击隐藏
</button
>
</div
>
<hr
>
<!-- 循环数组
-->
<div
>
<!-- 循环数组ietm每项内容
,index索引
,只写一个可以吧()去掉 key区分元素提高性能
-->
<div
:key
="index" v
-for="(ietm,index) in fruits">{{ietm
}} </div
>
</div
>
<hr
>
<!-- 循环对象 v
:值
,k名
,i索引
-->
<div
>
<div v
-for="(v,k,i) in obj">{{v
}}</div
>
</div
>
<hr
>
<!-- 结合使用
-->
<div v
-if="v==12" v
-for="(v,k,i) in obj2">{{v
}}</div
>
</div
>
<script type
="text/javascript">
var vm
= new Vue({
el
: '#app',
data
: {
score
: 90,
flag
: true,
fruits
: ['apple', 'orange', 'banana'],
obj
: {
a
: '小明',
b
: 'uzi',
c
: 'mlxg'
},
obj2
: {
a
: '小明',
b
: 'uzi',
c
: 'mlxg',
d
: 12
}
},
methods
: {
hide
: function() {
this.flag
= !this.flag
;
}
}
})
</script
>
</body
>
</html
>
遇见是缘分,错误请指正
Processed:
0.026, SQL:
9
