vue中的指令

v-bind:

v-bind动态绑定指令,官方文档是这样来说的:

1.:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"!

2.v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id  === :id


实时绑定属性

3.绑定样式:


绑定样式

v-model:

1.v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。


实现数据的双向绑定

v-for:

1.v-for用来循环遍历来用。

2.循环数组和json:


v-for循环

v-on:

1.v-on事件绑定:参考博客园一篇博主

v-if  v-else v-show:

1.v-if 条件渲染指令,根据返回值的true和false来隐藏和显示元素,v-else紧跟v-if使用。官方文档条件渲染指令!示例如下。


v-if和v-else

2.v-if 和 v-show的区别。简单说v-if和v-show的用法基本是相同的!v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。相比之下,v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。


v-show

值得一提的是当v-if和v-for一起使用的时候,v-for有更高的优先级!官方示例:


官网示例

指令相当于扩展了html中的内容!

学习笔记,老司机要多多呵护我啊

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容