条件判断
v-if当条件为false时,包含v-if的元素根本不会存在于dom中
v-show 当条件为false时,只是给元素增加一个行内样式display:none
循环遍历
v-for 遍历对象 数组类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 遍历对象中,若只获取一个值获取的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 获取key value -->
<ul>
<li v-for="(value,key,index) in info">
{{value}}-{{key}}-{{index}}
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data : {
info :{
name : 'ee',
age :14,
height : 111
}
}
})
</script>
</body>
</html>
响应式
可以做到响应式的:
push 数组最后面添加元素
pop 删除最后一个
shift 删除第一个元素
unshift 在数组最前面添加元素
splice:
- 删除元素 ,第二个参数传要删除几个元素,不传则后面全部删除
- 替换元素 第二个元素表示要替换几个元素,之后的参数则为用来替换原有的元素
- 插入元素 第二个参数传入0,后面跟上要插入的元素
sort() 排序
reverse()
通过索引改变元素不是响应式的,但是可以用splice实现,或者:
Vue.set(this.letters,0,'eee')