vue修饰符和条件指令

修饰符

创建 04-修饰符.html

修饰符 (Modifiers) 是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

即阻止事件原本的默认行为

data: {user: {}
}

methods: {onSubmit() {if (this.user.username) {console.log('提交表单')} else {alert('请输入用户名')}}
}

条件渲染

创建 05-条件渲染.html

v-if:条件指令

data: {ok: false
}

注意:单个复选框绑定到布尔值

同意许可协议

if:Lorem ipsum dolor sit amet.

no

v-show:条件指令

使用v-show完成和上面相同的功能


show:Lorem ipsum dolor sit amet.

no

  • v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
  • 相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
  • 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

 


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部