ホームページ > 記事 > ウェブフロントエンド > Vue でコンポーネントの切り替えを実装する 2 つの方法の紹介 (コード付き)
Vue でコンポーネントの切り替えを実装する 2 つの方法の紹介 (コード付き)
- 不言オリジナル
- 2018-08-08 11:54:574497ブラウズ
この記事では、Vue でコンポーネントの切り替えを実装する 2 つの方法を紹介します (コード付き)。必要な方は参考にしていただければ幸いです。
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
クリックしてログインするか、対応するコンポーネント モジュールに入るために登録します
注: v-if と v を使用してください-切り替えを行うには、2 つのコンポーネント間でのみ切り替えることができます。
🎜方法 2: 🎜
Vue が提供するコンポーネント要素を使用してコンポーネントを切り替えます。🎜 rrreee 🎜このメソッドは、複数のコンポーネントの切り替えを定義するために使用できます。コンポーネント名は に対応する必要があることに注意してください🎜🎜おすすめ関連記事: 🎜🎜🎜ノードサーバーが Douban データの取得を実装する方法(コード)🎜🎜 🎜🎜vueはToutiao🎜🎜のホームページタブを模倣する機能を実装します以上がVue でコンポーネントの切り替えを実装する 2 つの方法の紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。