cari

Rumah >hujung hadapan web >tutorial js >vue实现tab切换外加样式切换方法

vue实现tab切换外加样式切换方法

亚连
亚连asal
2018-05-29 17:58:213695semak imbas

下面我就为大家分享一篇vue实现tab切换外加样式切换方法，具有很好的参考价值，希望对大家有所帮助。

实例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
   list-style: none
  }
  #app {
   width: 504px;
   height: 300px;
   margin: 100px auto;
   border: 1px solid #000;
  }
  ul {
   overflow: hidden;
  }
  li {
   width: 100px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 50px;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
  }
  li:nth-child(5) {
   border-right: none;
  }
  .cur {
   height: 51px;
   background: blue;
   border-bottom: none;
  }
 </style>
</head>
<body>
<p id="app">
 <ul>
  <li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab(&#39;text&#39;+(index+1))">
   {{num.t}}
  </li>
 </ul>
 <p class="box">
  <component :is=&#39;currentView&#39; keep-alive></component>
 </p>
</p>
<script src="vue.js"></script>
<script>
 const text1 = Vue.component(&#39;text1&#39;, {template: `<p><h1>Text111111111111</h1></p>`});
 const text2 = Vue.component(&#39;text2&#39;, {template: `<p><h1>Text222222222222</h1></p>`});
 const text3 = Vue.component(&#39;text3&#39;, {template: `<p><h1>Text333333333333</h1></p>`});
 const text4 = Vue.component(&#39;text4&#39;, {template: `<p><h1>Text444444444444</h1></p>`});
 const text5 = Vue.component(&#39;text5&#39;, {template: `<p><h1>Text555555555555</h1></p>`});
 var vm = new Vue({
  el: "#app",
  data: {
   currentView: text1,
   nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],
   iscur: 0
  },
  methods: {
   tab(tabText){
    this.currentView = tabText;
   }
  }
 })
</script>
</body>
</html>

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

相关文章：

vue中Npm run build 根据环境传递参数方法来打包不同域名

利用js实现前后台传送Json的示例代码

Vue 将后台传过来的带html字段的字符串转换为 HTML

Atas ialah kandungan terperinci vue实现tab切换外加样式切换方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
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 sebelumnya：JS里常见内置函数使用详解Artikel seterusnya：javaScript中"=="和"==="的区别详解

Artikel berkaitan

Lihat lagi