Ci-dessous, je partagerai avec vous un article sur la façon d'implémenter le changement d'onglet et le changement de style dans Vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.
L'exemple est le suivant :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!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('text'+(index+1))" >
{{num.t}}
</li>
</ul>
<p class = "box" >
<component :is='currentView' keep-alive></component>
</p>
</p>
<script src= "vue.js" ></script>
<script>
const text1 = Vue.component('text1', {template: `<p><h1>Text111111111111</h1></p>`});
const text2 = Vue.component('text2', {template: `<p><h1>Text222222222222</h1></p>`});
const text3 = Vue.component('text3', {template: `<p><h1>Text333333333333</h1></p>`});
const text4 = Vue.component('text4', {template: `<p><h1>Text444444444444</h1></p>`});
const text5 = Vue.component('text5', {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>
|
Copier après la connexion
Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde. à l'avenir.
Articles connexes :
Npm run build in vue regroupe différents noms de domaine en fonction de la méthode de passage des paramètres de l'environnement
Utilisez js pour réaliser Exemple de code Json de transfert avant et arrière
Vue convertit la chaîne avec le champ HTML transmis depuis l'arrière-plan en HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!