Vue的常用指令和属性
常用指令
在vue中比较常用的指令有v-for,v-if,v-Show,v-model,v-bind,v-on,v-else,v-else-if这八个，其他一些如v-html这种不经常用的本文中不会讲解
v-for
v-for类似于java中的for循环，可以用来将一个数组内的数据循环获得
<body>
<div id="app">
<ul>
<li v-for="item in movies">{
{
item}}</li>
</ul>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['泰坦尼克号','海蒂和爷爷','活着','功夫']
}
})
</script>
v-if、v-else和v-else-if
v-if、v-else、v-else-if这三个经常放在一起使用，类似于java中的if else语句，用来做判断
<body>
<div id="app">
<h1 v-if="score>100">你有问题</h1>
<h1 v-else-if="score>80">优秀</h1>
<h1 v-else-if="score>70">良好</h1>
<h1 v-else-if="score>60">加油</h1>
<h1 v-else>成绩录入错误,明年再考</h1>
</div>
</body>
<script>
const app=new Vue({
el:'#app',
data:{
score:85
}
})
</script>
v-show
v-show可以根据表达式的值来显示或者隐藏HTML元素，当表达式的值为true时会显示，false时会隐藏
<body>
<div id="app"
最低0.47元/天 解锁文章
942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
