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