极客观点
项目管理
HarmonyOS
新手，最近刚开始学vue,一个简单的todoList实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div id="todo">
<h2>小目标列表</h2>
<h3>添加小目标</h3>
<input type="text" placeholder="ded"
@keyup.13="addList" v-model="addText"\>
<p>共有{{prolist.length}}个目标</p>
<!--v-for遍历prolist-->
<li class="li1" v-for="list in prolist">
<div>
<span class="type-span"></span>
<span>{{list.name}}</span>
<span class="close">X</span>
</div>
</li>
</div>
<script src="../../vus.js"></script>
<script>
new Vue({
el: "#todo",
data: {
addText:'',
//name-名称,status-完成状态
prolist:[
{name:"HTML5",status:false},
{name:"CSS3",status:false},
{name:"vue",status:false},
{name:"react",status:false}
]
},
computed:{
},
methods:{
addList(){
//添加进来默认status=false,就是未完成状态
this.prolist.push({
name:this.addText,
status:false
});
//添加后，清空addText
this.addText="";
}
}
});
</script>
</body>
</html>
上面的代码在浏览器中会报错。。。
SyntaxError: Unexpected string in
with(this){return _c('div',{attrs:{"id":"todo"}},[_c('h2',[_v("小目标列表")]),_v(" "),_c('h3',[_v("添加小目标")]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(addText),expression:"addText"}],attrs:{"type":"text","placeholder":"ded","":""},domProps:{"value":(addText)},on:{"keyup":function($event){if(!('button' in $event)&&$event.keyCode!==13)return null;return addList($event)},"input":function($event){if($event.target.composing)return;addText=$event.target.value}}}),_v(" "),_c('p',[_v("共有"+_s(prolist.length)+"个目标")]),_v(" "),_l((prolist),function(list){return _c('li',{staticClass:"li1"},[_c('div',[_c('span',{staticClass:"type-span"}),_v(" "),_c('span',[_v(_s(list.name))]),_v(" "),_c('span',{staticClass:"close"},[_v("X")])])])})],2)}
最后的关闭写错了 应该是/