<template>
<!-- 在template中，只能存在一個根組件 -->
<div class="event">
<ul>
<li v-on:click="getName(name,index,$event)" v-for='(name,index) in names'>{{name}}</li>
</ul>
<input type="text" v-on:keyup.enter="getKeyInfo" />
<button v-on:click="pushArr">pushArr</button>
<button v-on:click="getOdd">奇數</button>
<ul>
<li v-for="n in wantNums">{{n}}</li>
</ul>
<p>{{message}}</p>
<p>{{msgRe}}</p>
<p>{{msgRe2()}}</p>
</div>
</template>
<script>
export default {
data() {
return {
names: ['小軍', '小明', '小李'],
count: 0,
nums: [1, 2, 3, 4, 5, 6, 7, 8, 9],
wantNums: [],
message:'how are you today!'
}
},
methods: {
getName(name, index, event) {
console.log(this.names[index])
console.log(event)
alert(index + '--' + name)
},
getKeyInfo(event) {
console.log(event)
},
pushArr() {
this.names.push('name' + this.count++)
},
getOdd() {
this.nums.filter(m => {
if(m % 2 != 0) {
this.wantNums.push(m)
}
})
},
msgRe2(){//每次都計算
return this.message.split('').reverse().join('')
}
},
computed:{
msgRe(){//如果屬性值沒有發生改變，直接從緩存中取
return this.message.split('').reverse().join('')
}
}
}
</script>
<style>
li {
list-style: none;
}
li:hover {
background: red;
cursor: pointer;
}
</style>