vscode学习vue（一）

<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>

效果图

原文地址