(1) 單個(gè)按鈕的過(guò)度切換

效果： 點(diǎn)擊按鈕，好人壞人來(lái)回切換；
注意： 相同標(biāo)簽切換，需要加上key；

HTML

<div class="head1"@click="isEditing = !isEditing "><transition name="fade"mode="out-in"><button v-if="isEditing"key="save">好人</button><button v-elsekey="edit">壞人</button></transition></div>

JS

export default {name: 'Trans',data () {return {head1: true}}

---

(2) 單選框控制多個(gè)按鈕切換

HTML

<div><input type="radio"id="one"value="One"v-model="picked"><label for="one">One</label><br><input type="radio"id="two"value="Two"v-model="picked"><label for="two">Two</label><br><input type="radio"id="three"value="Three"v-model="picked"><label for="Three">Three</label><br><div>Picked: {{ picked }}</div><div><transition name="fade"mode="out-in"><button v-if="picked === 'One'"key="saved">第一個(gè)按鈕</button><button v-if="picked === 'Two'"key="edited">第二個(gè)按鈕</button><button v-if="picked === 'Three'"key="editing">第三個(gè)按鈕</button></transition></div>

JS

export default {name: 'Trans',data () {return {picked: '',}}

---

(3) 組件之間切換

HTML

<div @click="componsChange"><transition name="component-fade"mode="out-in"><component v-bind:is="view"></component></transition></div>

JS

export default {name: 'Trans',data () {return {view: 'v-a'}},methods: {componsChange () {if (this.view == 'v-a') {this.view = 'v-b'} else {this.view = 'v-a'}}},components: {'v-a': {template: '<div>Component A</div>'},'v-b': {template: '<div>Component B</div>'}}

---

(4) 列表列表的進(jìn)入/離開(kāi)過(guò)渡

HTML

<div class="head10"><div id="list-complete-demo"class="demo"><button v-on:click="shuffle">Shuffle</button><button v-on:click="add">Add</button><button v-on:click="remove">Remove</button><transition-group name="list-complete"tag="p"><span v-for="item in items"v-bind:key="item"class="list-complete-item">{{ item }}</span></transition-group></div></div>

JS

new Vue({el: '#list-complete-demo',data: {items: [1,2,3,4,5,6,7,8,9],nextNum: 10},methods: {randomIndex: function () {return Math.floor(Math.random() * this.items.length)},add: function () {this.items.splice(this.randomIndex(), 0, this.nextNum++)},remove: function () {this.items.splice(this.randomIndex(), 1)},shuffle: function () {this.items = _.shuffle(this.items)}} })

CSS

.list-complete-item {transition: all 1s;display: inline-block;margin-right: 10px; } .list-complete-enter, .list-complete-leave-to /* .list-complete-leave-active for below version 2.1.8 */ {opacity: 0;transform: translateY(30px); } .list-complete-leave-active {position: absolute; }

這個(gè)效果要執(zhí)行的依賴：

1- 安裝 npm i lodash -S
2- 在mian.js中引入

import _ from 'lodash' Vue.prototype._ = _

總結(jié)

以上是生活随笔為你收集整理的vue元素切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。