vue修饰符和条件指令

修饰符

创建 04-修饰符.html

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

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

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

data: {user: {}
}

<!-- 修饰符用于指出一个指令应该以特殊方式绑定。这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit"><label for="username"><input type="text" id="username" v-model="user.username"><button type="submit">保存</button></label>
</form>

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

条件渲染

创建 05-条件渲染.html

v-if：条件指令

data: {ok: false
}

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

<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1>

v-show：条件指令

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

<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>

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

vue修饰符和条件指令相关推荐

揭穿Vue修饰符async的秘密
官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来,如图: 父组件代码: ...
【建议收藏】面试官贼喜欢问的 32+ vue 修饰符，你掌握几种啦？
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步. 前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰 ...
vue修饰符--可能是东半球最详细的文档（滑稽）
原文链接:segmentfault.com 为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录表单修饰符事件修饰符鼠标按键修饰符 ...
前端-vue(修饰符-组件)
内置对象Vue new Vue():它是Vue里的内置对象,传递参数是对象类型传递 <script src="js/vue.js"></script>< ...
vue修饰符 .lazy .number .trim
.lazy 在输入框中,v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 , 也就是在失去焦点或者按下回车键时才更新 <template>< ...
vue --- 修饰符.lazy、.number、.trim
.lazy: 会在转变为change事件中同步 <div id="app"><input type="text" v-model.lazy=& ...
Vue 32个修饰符，你不一定全知道！
点击上方前端开发博客,关注公众号回复加群,加入前端群前言 vue简洁好用体现在很多个地方,比如其内置了32+修饰符,可以很方便我们阻止冒泡.阻止默认事件.鼠标事件处理.系统键盘事件等等,让我们可 ...
vue中各类事件修饰符
1.stop:阻止事件冒泡,顺序是执行顺序是div>body>document,js默认开启事件冒泡.e.stopPropagation().e.stopImmediatePropagat ...
026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

vue修饰符和条件指令

修饰符

条件渲染

vue修饰符和条件指令相关推荐

最新文章

热门文章