拷贝直接运行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>madefuck</title>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<!-- <ul>
<todo_item v-for='item in list' :mes='item.mes' :del='item.del'></todo_item>
</ul> -->
<todo_list>
<todo_item v-for='item in list' :mes='item.mes' :del='item.del' @delete='handleClick'>
<span slot="pre">前置图标</span>
<span slot="suf">后置图标</span>
</todo_item>
</todo_list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo_list',{
template:`
<ul>
<slot></slot>
</ul>`,
data: function() {
return {
list: [{
mes:'子龙',
del: true
} , {
mes: '翼德',
del: false
}]
}
},
})
Vue.component('todo_item',{
props: {
mes: String,
del: {
type: Boolean,
default:false
}
},
template: `
<li >
<slot name="pre"></slot>
<span v-if='del'>{{mes+del}}</span>
<span v-else style="text-decoration: line-through;">{{mes+del}}</span>
<button v-show='del' @click='handleClick'>删除</button>
<slot name="suf"></slot>
</li>
`,
data: function() {
return {}
},
methods: {
handleClick () {
console.log('点击了删除按钮')
this.$emit('delete', this.mes)
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'hello world',
list: [{
mes:'子龙',
del: true
} , {
mes: '翼德',
del: false
}]
},
methods: {
handleClick (v) {
console.log('点击了删除按钮弗雷德' + v)
}
}
}
)
</script>
</body>
</html>
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
