<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style type="text/css"> ???????.isFinished{color:red;} ???</style> ???<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> ???<script type="text/javascript"> ???????window.onload = function () { ???????????new Vue ({ ???????????????el: ‘#app‘, ???????????????data: { ???????????????????title: ‘this is title demo‘, ???????????????????items: [], ???????????????????newItem: ‘‘, ???????????????}, ???????????????methods:{ ???????????????????finished: function (item) { ???????????????????????item.isFinished = !item.isFinished; ???????????????????}, ???????????????????add: function () { ???????????????????????this.items.push({ ???????????????????????????label: this.newItem, ???????????????????????????isFinished: false, ???????????????????????}); ???????????????????????this.newItem = ‘‘; ???????????????????} ???????????????}, ???????????}) ???????} ???</script></head><body> ???<div id=‘app‘> ???????<input type="text" v-model=‘newItem‘ v-on:keyup.enter="add"> ???????<p v-text=‘title‘></p> ???????<div v-for="item in items"> ???????????<li v-text="item.label" v-bind:class="{isFinished: item.isFinished}" v-on:click="finished(item)"></li> ???????</div> ???</div></body></html>
vue.js 添加信息
原文地址：https://www.cnblogs.com/phpcurd/p/8961658.html