해당 섹션의 강좌:Vue-cli 스캐폴딩 설치 및 프로젝트 생성
Demo .box { width: 200px; height: 300px; background-color: coral; display: none; } div.show{ display: block; } {{message}} {{title}} - 点击隐藏、显示 {{item.title }} // vue3的方式 一个实例挂载一个模板(组件) // 创建一个实例 const app = Vue.createApp({ data(){ return { show:true ,width:"300px" ,height:"200px" ,message:"this is a test!" ,title:'vue demo' // 数组 ,articles:[ {title:'标题1111',content:"内容1111"}, {title:'标题2222',content:"内容11112"}, {title:'标题3333',content:"内容11113"}, {title:'标题44444',content:"内容11114"}, {title:'标题55555',content:"内容11115"}, {title:'标题666666',content:"内容11116"}, {title:'标题7777',content:"内容11117"}, ] } }, methods:{ //自定义方法 //在里面需要用this,在外面直接用APP myshow(){ this.show = !this.show; } } }).mount("#app");
2022-03-230个赞