<!--需求 1：動態生成div並且渲染 2：在輸入框輸入信息點擊添加並且在頁面渲染
3：點擊對應位置並且刪除 4：高亮顯示點擊位置
-->
<!-- 實現 1.使用列表渲染 2.v-model數據雙向綁定 獲取用戶輸入框的值再點擊事件添加
3.通過列表索引值傳行參至函數點擊事件刪除 4.狀態欄定義一個狀態並通過索引值記錄當前點擊位置節點
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js"></script>
<div id="app">
<!-- v-model 數據雙向綁定 NB-->
<input type="text" v-model="mytext"/>
<button @click="add">添加信息</button>
<ul>
<!-- v-if 限定空值不添加 ,index行參方式傳入函數-->
<!-- 三目運算，點擊當前節點得到索引並讓當前節點顯示高亮 -->
<li v-for="(mydata,index) in datalist" v-if="mydata"
:class="now === index?'active':''" @click="changecolor(index)">
{{mydata}} --<button @click="del(index)">刪除信息</button>
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
datalist : ["1111","2222"],
mytext : "1000w",
now : 0 //記錄當前節點狀態
},
methods:{
add(){
this.datalist.push(this.mytext)
},
del(index){
// 刪除列表元素 從這個索引位置刪除當前這個元素
this.datalist.splice(index,1)
},
changecolor(index){
//this.now是變量名 index是值
this.now = index
console.log(this.now)
}
}
})
</script>
<style>
/* 注意寫法 */
.active{
background-color: #FFFF00;
}
</style>
</head>
<body>
</body>
</html>