<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>渲染小案例</title>
</head>
<body>
<div class="app">
<input v-model="newAdd" v-on:keyup.enter="addNewTo" placeholder="添加列表"/>
<ul>
<li is="todo-item" v-for="(todo,index) in todos" v-bind:title="todo" v-bind:id="index" v-on:remove="todos.splice(index, 1)">{{todo}}</li>
</ul>
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('todo-item',{
template:'<li>{{title}}<button v-on:click="$emit(\'remove\')">x</button></li>',
props:['title'],
});
var vm=new Vue({
el:'.app',
data:{
newAdd:'',
todos:[
'今天是个不错的日子',
'我是不是世界上最牛逼的程序员',
'好像有点膨胀了哦'
]
},
methods:{
addNewTo:function(){
this.todos.push(this.newAdd);
this.newAdd='';
}
}
});
</script>
</html>
vue渲染dome案例
猜你喜欢
转载自blog.csdn.net/a4561614/article/details/81080700
今日推荐
周排行