이 글은 Vue에서 (코드 포함) 컴포넌트 전환을 구현하는 두 가지 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
Vue에서 구성 요소를 전환하는 여러 가지 방법
방법 1: v-if와 v-else를 함께 사용하여 전환을 달성
v-if 和 v-else 结合使用实现切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" src="js/vue-2.4.0.js"></script></head><body> <div id="app"> <a href="" @click.prevent="flag=true">登陆</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flag"></register> </div><script> *<!--定义登录组件-->* Vue.component('login',{ template :'<h3>登陆组件</h3>' }); *<!--定义注册组件-->* Vue.component('register',{ template :'<h3>注册组件</h3>' }); *<!--创建Vue实例-->* var vm = new Vue({ el : '#app', data :{ flag : true, }, methods:{}, });</script></body></html>
运行结果:点击登录或注册 进入相应的组件模块
注意:使用 v-if 和 v-else 实现切换,只能在两个组件间相互切换,不能实现多个组件的切换
方式二: 使用Vue提供的component元素实现组件切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script rel="script" src="js/vue-2.4.0.js"></script></head><body> <div id="app2"> <!-- 链接修改comName的值--> <a href="" @click.prevent="comName = 'login' ">登陆2</a> <a href="" @click.prevent="comName = 'register' ">注册2</a> <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --> <component :is=" comName "></component> </div><script> //组件名称是 字符串 Vue.component('login',{ template :'<h3>登陆组件</h3>' }) Vue.component('register',{ template :'<h3>注册组件</h3>' }) //实例 var vm2 = new Vue({ el : '#app2', data :{ comName : 'login',//当前 component 中的 :is 帮i的那个的组件的名称 }, methods:{}, });</script></body></html>
这种方式可以实现定义多个组件切换,需要注意的是,组件名称要对应
rrreee
로그인하려면 클릭하거나 해당 구성요소 모듈에 들어가려면 등록하세요
그렇지 않으면 전환할 수 있습니다. 여러 구성 요소가 아닌 두 구성 요소 간에만 전환할 수 있습니다.
방법 2: Vue에서 제공하는 구성 요소 요소를 사용하여 구성 요소를 전환하세요.
rrreee
구성 요소 이름은
🎜🎜권장 관련 기사: 🎜🎜🎜노드 서버가 Douban 데이터 획득을 구현하는 방법( code)🎜🎜 🎜🎜vue는 Toutiao🎜🎜의 홈페이지 탭을 모방하는 기능을 구현합니다.위 내용은 Vue에서 컴포넌트 전환을 구현하는 두 가지 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!