Vue任務列表中，有多個可選項，直接單擊進行修改——0920
阿新 • • 發佈：2018-12-11
任務列表中，有多個可選項，直接單擊進行修改。功能實現。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue1-0918</title>
<style>
.color1{
color: skyblue;
}
.deletedline{
background: #ccc;
color: red;
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>vue測試！</h1><br>
<div id="div1">
<h1>這是view層</h1>
<h2>測試：雙向繫結!</h2>
<h2>{{message}}</h2>
<h2>{{teacherListJson[0].name}}</h2>
<br>
message<input type="text" v-model="message" name="msg"><br>
obj.name<input type="text" v-model="obj.name" name="name"><br>
jsonList<input type="text" v-model="teacherListJson[0].name" name="jsonlist1">
<h2>測試：button.click方法、監聽事件</h2>
<button @click="fn1">測試message</button>
<button @click="fn2('abc')">測試btn的傳參</button>
<br>
<h2>測試：if語句</h2>
<h3 v-if="isComeBack">你快回來</h3>
<h3 v-if="!isFinished">活沒幹完呢</h3>
<h3 v-else>活幹完了</h3>
<h3>---------------------------------</h3>
<h3 v-if="obj.age>17">你成年了:{{obj.age}}歲了。</h3>
<br>
<h2>測試v-show</h2>
<h3 v-show="obj.age>20">你是未成年人：才{{obj.age}}</h3>
<!--<h3 v-else>{{obj.age}}歲了，老大不小了</h3>-->
<h2>測試v-for</h2>
<table>
<thead style="color: blue;background-color: coral">
<th>行號</th>
<th>Id號</th>
<th>Name</th>
<th>Age</th>
</thead>
<tbody>
<tr v-for="(item,index) in teacherListJson">
<td>{{index+1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
<h2>測試：v-bind</h2>
<h3>資料分頁行 示例</h3>
<h3>
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber===n+1?'active':''">{{n}}</a>
</li>
</ul>
</h3>
<h2>綜合測試</h2>
<h3>
</h3>
</div>
<div id="div2">
<h3>測試：任務列表</h3>
<p>任務數：{{todoList.length}}，還有{{countLeavingRows()}}個未完成 <button @click="delRowMore()">刪除</button></p>
<ul style="list-style: none">
<li v-for="(item,index) in todoList" v-bind:class="{deletedline:item.isDo}" >
<input type="checkbox" v-model="item.isDo">
<!--預設顯示項-->
<span v-show="item.isEdit" v-text="item.desc" @click="toggleShowModify(index)"></span>
<!--修改欄，先隱藏-->
<input v-show="!item.isEdit" type="text" v-model="item.desc" @blur="item.isEdit=true">
</li>
<input type="text" v-model="newLine.desc">
<button @click="addRow()">新增一行</button>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
<!--這是model層的資料-->
var exampleData={
isComeBack:true,
isFinished:false,
message:'hello world!',
arr1:["吃飯","睡覺","打恆大"],
obj:{name:'tom', age:18},
teacherListJson:[{id:21,name:"jack陳",age:19},{id:32,name:"司馬青雲",age:26},{id:63,name:"jackson",age:28}],
activeNumber:0,
pageCount:10
};
// ViewModel vue例項1
var v1= new Vue({
el:'#div1',
data: exampleData,
methods:{
fn1:function(){
console.log("fn1,clicked!");
alert(this.message);
},
fn2:function(msg){
console.log("傳入的引數是:"+ msg);
alert("傳入的引數是:"+ msg);
},
createPerson: function(){
this.people.push(this.newPerson);
// 新增完newPerson物件後，重置newPerson物件
this.newPerson = {name: '', age: 0, sex: 'Male'}
},
deletePerson: function(index){
// 刪一個數組元素
this.people.splice(index,1);
},
}
});
//v2：任務列表
var v2Data={
isShowline:true,
lineInfo:'',
v2Arr:["吃飯","睡覺","打恆大"],
newLine:{id:0,desc:'',isDo:false}, //單行任務
todoList:[{id:21,desc:"接人",isDo:false,isEdit:true},{id:22,desc:"送人",isDo:false,isEdit:true},{id:26,desc:"打人",isDo:false,isEdit:true}]
};
var v2= new Vue({
el:'#div2',
data: v2Data,
methods: {
addRow: function(){
this.todoList.push(this.newLine); //增加一行
// newLine，重置newLine物件
this.newLine = {id:0,desc:'',isDo:false}
},
delRow:function (index) {
this.todoList.splice(index); //刪除一行
},
delRowMore:function () {
//刪除多行
for (var i=this.todoList.length-1;i>=0;i--){
console.log(i);
console.log("isDo:"+ this.todoList[i].isDo);
if (this.todoList[i].isDo){
this.todoList.splice(i,1);
}
}
},
countLeavingRows:function () {
var num=0;
this.todoList.forEach(function (item) {
if (!item.isDo){
num++;
}
}
)
return num; //有幾個被選中
},
toggleShowModify(index){
console.log("click!!!")
// this.isShowline=false; //顯示 修改欄
console.log("index:"+ index);
console.log("isEdit:"+ this.todoList[index].isEdit);
this.todoList[index].isEdit=false;
},
}
});
</script>
</html>