简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial js > teks badan

Vue2.0 给Tab标签页和页面切换过渡添加样式的方法

亚连
Lepaskan： 2018-05-30 15:30:00
asal
3385 orang telah melayarinya

下面我就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法，具有很好的参考价值，希望对大家有所帮助。

使用vue-router构建单页应用时，如何给当前页面的标签页添加样式呢？

1.在app.vue文件中你的nav中添加路由地址

2.依然在app.vue文件中，添加样式

不用在任何位置加class，只要在css中写上这个名称，样式自己随意改。

如何在单页切换的时候添加过渡？

1.在app.vue文件中，将router-view包裹在transition中，transition加个name。

2.在app.vue中添加css样式（你的transition的name是什么，第一个单词就是什么）

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

nodejs实现超简单生成二维码的方法

nodejs+mongodb aggregate级联查询操作示例

基于vue1和vue2获取dom元素的方法

Atas ialah kandungan terperinci Vue2.0 给Tab标签页和页面切换过渡添加样式的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
切换 过渡
sumber：php.cn
Artikel sebelumnya：vue toggle做一个点击切换class(实例讲解) Artikel seterusnya：vue2.0 实现页面导航提示引导的方法
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1810
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1963
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1660
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1563
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1592
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！