源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue列表渲染--處理列表</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
ul li {
cursor: pointer;
}
.done {
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!-- :class 里面的寫法表示的是是否使用前面的類名 后面的 task.completed 結(jié)果是一個 boolean 值 為 true 會為 <li> 加 done 類名 -->
<li @click="dontSelect(task)" :class="{'done':task.completed}" v-for="task in tasks">{{ task.content }}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
tasks: [{
content: "看電影",
completed: false
}, {
content: "打籃球",
completed: false
}, {
content: "寫代碼",
completed: false
}]
},
methods: {
dontSelect: function(task) {
task.completed = !task.completed;
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue列表渲染--處理列表</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
ul li {
cursor: pointer;
}
.done {
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<!-- 記得屬性的前面加 : 表示相應(yīng)的值是引用而來的 -->
<task :items="tasks"></task>
</div>
<template id="task-template">
<p>
<span>還剩幾個</span>
<span v-show="remain">({{ remain }})</span>
</p>
<ul>
<!-- :class 里面的寫法表示的是是否使用前面的類名 后面的 task.completed 結(jié)果是一個 boolean 值 為 true 會為 <li> 加 done 類名 -->
<li @click="dontSelect(task)" :class="{'done':task.completed}" v-for="task in items">
{{ task.content }}
<span @click="deleteTask(task)">×</span>
</li>
</ul>
</template>
<script type="text/javascript">
// task 為要使用的組件名稱
Vue.component("task", {
//引用的組件名稱
template: "#task-template",
props: ['items'],
methods: {
dontSelect: function(task) {
task.completed = !task.completed;
},
deleteTask: function(task) {
//這里刪除的是 Vue 中的 data 里面的 源
this.items.$remove(task);
}
},
computed:{
remain:function(){
//這個計算的是除了被勾選上之后的還剩幾個
return this.items.filter(function(task){
return !task.completed;
}).length
}
}
});
new Vue({
el: "#app",
data: {
tasks: [{
content: "看電影",
completed: false
}, {
content: "打籃球",
completed: false
}, {
content: "寫代碼",
completed: false
}]
},
});
</script>
</body>
</html>
