v-if vs v-show
v-if vs v-show
v-if 根据渲染条件决定是否把元素渲染到DOM页面，而v-show不管渲染条件是什么，都会把元素渲染到DOM页面，只是简单的切换CSS的显示隐藏。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的
docs/《Vue》笔记/01.基础/30.v-if vs v-show.md。
原作者：xugaoyi。许可证：MIT。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Barry's Blog！
相关推荐
2020-02-18
vue父子组件的生命周期顺序
vue父子组件的生命周期顺序加载渲染过程1父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 父组件会先执行到beforeMount，接着会执行子组件钩子到挂载结束，再挂载父组件。 子组件更新过程1父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父组件更新过程1父beforeUpdate -> 父updated 销毁过程1父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md。原作者：xugaoyi。许可证：MIT。
2020-02-04
兄弟组件传值
兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2 父组件： 123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }} 子组件1： 1this.$emit('方法名x', 值) // 传出值 子组件2： 123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔...
2020-02-04
子组件派发事件和值给父组件
子组件派发事件和值给父组件API 子组件通过$emit派发事件和值给父组件（值可以有多个） 1this.$emit('fnX', value) 父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值 12345678<ComponentName @fnX="fnY"></ComponentName>methods: { fnY(value) { console.log(value) }} 父子组件间传递数据 demo See the Pen mdJVqgg by xugaoyi (@xugaoyi) on CodePen. 1<script async src="https://static.codepen.io/assets/embed/ei.js"></script> 来源：本文导入自 xugaoyi/vuepress-theme-vdoing ...
2020-02-13
使用组件的细节点
使用组件的细节点解析 DOM 模板时的注意事项1234567891011121314151617<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div><script type="text/javascript"> Vue.component('row', { template: '<tr><td>this is a row</td></tr>' }) var vm = new Vue({ ...
2020-02-17
使用animate库
vue中使用Animate.css库自定义过渡类名我们可以通过以下 attribute 来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。 使用Animate.css库1234567<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hel...
2020-02-15
自定义事件
自定义事件API 在组件标签v-on绑定的事件是自定义事件123456789101112131415161718<div id="root"> <child @click="handleClick"></child> <!--这里click是自定义事件--></div><script type="text/javascript"> Vue.component('child', { template: '<button>Child</button>', }) var vm = new Vue({ el: '#root' methods: { handleClick() { alert('...
