<template>
<div id="app">
<HelloWorld />
<Test></Test>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
//注册组件
import Test from "./components/Test.vue"
export default {
name: 'App',
components: {
HelloWorld,
Test
}
}
</script>
<template>
<div>
<div class="geyao">{{ geyao }}</div>
<h3>哈哈哈</h3>
<button @click="changeName">修改</button>
</div>
</template>
<script>
//data 必须是函数
export default {
name: "geyao",
data() {
return {
geyao: "我是歌谣",
};
},
methods: {
changeName() {
this.geyao = "fangfang";
},
},
};
</script>
<style lang="less">
.geyao {
color: aquamarine;
}
h3{
color: red;
}
</style>
运行结果