v-for循環遍歷
v-for循環遍歷數組
在data中創建一個數組變量 在綁定id爲app的div中 創建li 使用v-for循環講data中的那個數組遍歷出來 它的語法格式是v-for = “ key(用來接收每一個數據 in 數組變量) ” 然後直接通過Mustache語法講key輸出就可以了 用法和 for in 循環相似 注意 如果想把他的索引也遍歷出來那麼 給他一個小括號 然後直接（key，index）輸出的話用Mustache語法是{{index+1}}.{{items}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for = 'item in names'>{{item}}</li>
</ul>
<ul>
<li v-for = "(items,index) in names">{{index+1}}.{{items}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
names:['tbw','kobe','james','curry']
}
})
</script>
</body>
</html>
v-for遍歷對象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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) in info">{{key}}.{{value}}</li>
</ul>
<!-- 獲取key和value和index-->
<ul>
<li v-for = "(value,key,index) in info">{{index}}.{{key}}.{{value}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
info:{
name:'tbw',
age:19,
height:1.85
}
}
})
</script>
</body>
</html>
那些數組的方法是響應式的
1.push方法
this.letters.push(“aaa”)
2.通過索引值修改數組中的元素
this.letters[0] = “vvv”;
3.php() 刪除最後一位元素
this.letters.pop();
4.shift() 刪除第一個元素
this.letters.pop()
5.unshift() 在數組最前面添加元素 可以添加多個值
this.letters.unshift(“aaa”，“bbb”,“ccc”)
splice 刪除元素、插入元素、替換元素
刪除元素：第二個參數傳入你要刪除幾個元素(如果沒有傳就刪除後面所有)
替換元素：第二個參數，表示我們要替換幾個元素，後面是用來替換前面的元素
插入元素：第二個參數，傳入0.並且後面跟上要插入的元素
6.splice(start)
this.letters.splice(1,)
this .letters.splice(1,0,‘x’,‘y’,‘z’)
7.sort 排序
this.letters.sort()
8.reverse()
this.letters.reverse()
set(要修改的對象，索引值)
Vue.set(this.letters,0,‘bbbbb’)
v-if hev-else 小案例
登錄頁面的切換登錄功能 手機號和郵箱登錄 點擊按鈕後手機號和郵箱可以來回切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span v-if="isuser">
<label for="username">用戶賬號</label>
<input type="text" id="username" key = 'username' placeholder="用戶賬號"/>
</span>
<span v-else>
<label for="email">用戶郵箱</label>
<input type="text" id="email" key = 'email' placeholder="用戶郵箱"/>
</span>
<button type="button" @click="isuser = !isuser">切換類型</button>
</div>
<script src="../js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:'#app',
data:{
isuser:true
}
})
</script>
</body>
使用v-if和v-else選擇渲染指定的Dom，點擊按鈕對isUser變量取反。
這裏有個小問題，如果已經輸入了賬號了，此時想切換到郵箱輸入，輸入框未自己清空。此處需要了解一下vue可以操作，此時輸入輸入框值被替換了。
vue在進行DOM渲染是，處於性能考慮，會再次已經存在的元素，而不是每次都創建新的DOM元素。Vue內部發現原來的輸入元素不再使用，所以直接將其映射對應的虛擬DOM，用於替換。如果不希望出現類似的問題，可以給對應的dom元素加上key值，並保證key不同。
購物車小案例
詳情關注其他博客
JS高階函數的使用
詳情請關注其他博客