这里写自定义目录标题
文件名.vue里的内容：
template、div、script以及style分别应该写什么内容
<template>
<div class='hi' @click="showMessage('tom')">
{{message}}
<div v-if="age < 18"> 你未成年 </div>
<div v-else-if="age < 21"> 你成年了 </div>
<div v-else> 你可以结婚了 </div>
<ul>
<li v-for="fruit in fruits" :key="fruit">
{{fruit}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
message: 'hi, 我的第一个vue程序',
age:19,
fruits: ['apple', 'banana', 'pear', 'strawberry']
}
},
methods: {
showMessage:function(name){
alert('hi,'+ name);
}
}
}
</script>
<style>
.hi{
font-size: 20px;
}
</style>
效果图 原文地址
