Vue组件实用示例
本课主要介绍组件的一些小练习，通过这些小练习巩固下之前课程中的学习
1）组件中值的双向绑定
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: `
<div>
<input type="text" v-model="val">
<h1>{{val}}</h1>
</div>
`,
data: () => ({
val: 'Hello World !'
})
})
new Vue({
el: '#app'
})
</script>
2）结合methods组合示例
<div id="app">
<test></test>
</div>
<script>
Vue.component('test', {
template: `
<div>
姓名：<input type="text" v-model="name">
年纪：<input type="text" v-model="age">
<input type="button" value="录入" @click="insert()">
<ul>
<li v-for="(val, key) in arr">
ID：{{key}} 姓名：{{val.name}} 年龄：{{val.age}} <button @click="del(key)">删除</button>
</li>
<li v-show="arr.length < 1">当前暂无数据</li>
</ul>
</div>
`,
data: () => ({
arr: [
// {'name': 'test', 'age': '20'}
],
name: '',
age: ''
}),
methods: {
insert(){
this.arr.push({
'name': this.name,
'age': this.age
})
},
del(key){
this.arr.splice(key, 1);
}
}
})
new Vue({
el: '#app'
})
</script>