<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button v-on:click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 'Hello Vue!',
      message: 'Welcome to Vue.js'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Thank you for using Vue.js'
    }
  }
}
</script>
<style>
h1 {
  color: blue;
}
p {
  color: green;
}
button {
  background-color: yellow;
  color: black;
  padding: 10px;
  border-radius: 5px;
  font-weight: bold;
}
</style>
<!-- Usage: <my-component></my-component> -->
用vue写一段代码

原文地址: http://www.cveoy.top/t/topic/B4A 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录