!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<metaname="viewport"content="width=device-width,initial-scale=1.0">

　　<title>vue-demo事项520</title>

　　<style>

　　li.done{

　　text-decoration:line-through;

　　color:red;

　　font-weight:bold;

　　text-shadow:1px0px0pxyellow;

　　}

　　</style>

　　</head>

　　<body>

　　<!--对应js中的app-->

　　<divid="app">

　　<!--变量渲染-->

　　<p>{{title}}</p>

　　<!--条件渲染true显示，false不显示-->

　　<pv-if="showSub">{{subTitle}}</p>

　　<div>

　　<!--响应按Enter键加入事件-->

　　<input@keyup.enter="handleClick"type="text"v-model="mytodo">

　　<!--处理点击事件【添加】-->

　　<button@click="handleClick">添加</button>

　　<button@click="reset">清空已完成</button>

　　</div>

　　<!--v-for循环列表显示-->

　　<ul>

　　<!--<li:style="{'text-decoration':todo.done?'line-through':''}"

　　@click='toggle(index)'v-for='(todo,index)intodos'>{{index+1}}:{{todo.text}}</li>-->

　　<!--根据done的值，设置class的值-->

　　<li:class="{'done':todo.done}"@click='toggle(index)'

　　v-for='(todo,index)intodos'>{{index+1}}:{{todo.text}}</li>

　　</ul>

　　<p>{{remain}}/{{todos.length}}</p>

　　</div>

　　</body>

　　</html>

　　main.js

　　importVuefrom'vue'

　　Vue.config.productionTip=false

　　newVue({

　　/*找到id为app的容器*/

　　el:'#app',

　　data:{

　　title:'VueTodoList',

　　subTitle:'VUEBase01',

　　showSub:false,

　　mytodo:'',

　　todos:[

　　{text:'吃饭',done:false},

　　{text:'睡觉',done:true},

　　{text:'打豆豆',done:false}

　　]

　　},

　　//新定义一个字段remain

　　computed:{

　　remain(){

　　returnthis.todos.filter(v=>!v.done).length

　　}

　　},

　　methods:{

　　//点击添加事件响应(添加元素，清空输入框)

　　handleClick(){

　　this.todos.push({text:this.mytodo,done:false})

　　this.mytodo=''

　　},

　　toggle(i){

　　//切换状态

　　this.todos[i].done=!this.todos[i].done

　　},

　　reset(){

　　//已完成的过滤掉

　　this.todos=this.todos.filter(v=>!v.done)

　　}

　　}

　　})