VueDay03列表渲染迴圈渲染以及key的使用
阿新 • • 發佈：2020-09-14
Vue列表渲染，v-for的使用
①v-for="item in stars
②v-for="item,key in students
③v-for="item,key in students[0]
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"
迴圈渲染，v-for="todo in todos：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
todos:[
{text:"學習 Javascript"},
{text:"學習 Vue"},
{text:"整個牛專案"}
]
}
})
</script>
<!-- 在控制檯裡，輸入 app4.todos.push({ text: '新專案' })，會發現列表最後添加了一個新專案。 -->
</body>
</html>
key的使用，避免了複用現象，不加key區別的話，在相同的標籤下輸入的值會停留在輸入框內：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="isLogin" class="login" >
<h3>登入</h3>
使用者名稱:
<input type="text" name="username" key="login" />
密碼:
<input type="password" name="password" />
<button type="button">登入</button>
</div>
<div v-else class="register" >
<h3>註冊</h3>
使用者名稱:
<input type="text" name="username" key="register" />
密碼:
<input type="password" name="password" />
<button type="button">註冊</button>
</div>
<button @click="togglePage" type="button">切換登入註冊頁</button>
<script src="js/vue.js" ></script>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
isLogin:true
},
methods:{
togglePage:()=>{
app.isLogin = !app.isLogin;
}
}
})
</script>
</div>
</body>
</html>