条件渲染 (v-if)
1.vue中的v-if 和angular中的ng-if效果是相同的 使用方法基本也是相同的
2.在v-if 中紧跟着v-else 把if的条件改为false 之后会显示v-else所在标签的内容, 这就相当于js中的if-else(如果---否则---),中间也可以填加v-else-if
3.v-show的用法和ng-show的用法也是一样的 不可以后面接v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表达式</title>
<style>
.a{
color : blue;
}
.b{
color:pink;
}
.c{
font-size: 50px;
}
.d{
display: none;
}
</style>
</head>
<body>
<div id="box">
<!-- v-if -->
<!-- 相当于if else else要紧邻着if -->
<span v-if="isShow">加油!</span>
<!-- v-else 不需要值 -->
<p v-else>看到了没</p>
<br>
<span v-show="isShow">肯定能看见我</span>
</div>
</body>
<script type="text/javascript" src="./js/vue2.0.js" charse="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#box",
data:{
isShow : true,
}
})
</script>
</html>
列表渲染(v-for)
1.在angular中列表渲染为ng-repeat, vue中就是v-for
2.在vue1.0中存在着$index 和angular一样使用 ,但是在vue2.0中没有了$index 如果要获得下标时 写为'' (val,index) in arr '' 里面的index就代表下标 但是切记不能写成$index
3.遍历对象: v-for="x in obj" ==>{{x}}
(val,key) in obj ==>{{key+"--"+val}}
(val,key,index) in obj ==>{{key+"--"+val+"--"+index}}
遍历对象可以带回来的参数 这样的话 对象也可以用下标了
4.在vue中想遍历一定次数 直接定义次数然后遍历即可 没有了angular的繁琐
5.在vue中有重复的元素时 在vue1.0 中解决办法v-for="a in arr2" track-by="$index" ; 在vue2.0 中写法 v-for="a in arr2" v-bind:key="obj.id" 注:obj.id是遍历对象里面的唯一值,给key绑定上这个唯一值,让vue能正确的找到元素实现更改
上课所写的原码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>列表渲染</title>
<style>
.a{
color : blue;
}
.b{
color:pink;
}
.c{
font-size: 50px;
}
.d{
display: none;
}
</style>
</head>
<body>
<div id="box">
<!--angular 中 ng-repeat <===> vue 中 v-for -->
<span v-for="x in arr">{{x}}</span>
<!-- Vue 1.0中存在$index -->
<p v-for="(val,index) in arr">{{index+"-"+val}}</p>
<hr>
<span v-for="y in obj">{{y}}</span>
<p v-for= "(val,key) in obj">{{key+"--"+val}}</p>
<hr>
<p v-for="(val,key,index) in obj">{{index+"-"+key+"-"+index}}</p>
<hr>
<!-- 整数遍历 也就是遍历一个固定次数 -->
<p v-for="i in num">{{i}}</p>
<hr>
<!-- ng中数组有重复值 track by $index
Vue 1.0 中 v-for="a in arr2" track-by="$index"
Vue 2.0 中 v-for="a in arr3" :key="a.id"
在Vue中弃用了$index-->
<p v-for = "a in arr2">{{a}}----{{a.name+"-"+a.age}}</p>
</div>
</body>
<script type="text/javascript" src="./js/vue2.0.js" charse="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#box",
data:{
arr:["a","b","c"],
num:5,
obj:{
name :"sang",
address: "昌平",
age : 24
},
arr2:[{
name: "snag",
age :24
},{
name:"sang",
age:24
}]
}
})
</script>
</html>
