指令

  • 在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
    • 比如html页面中的属性 ```<div v-xxx ></div>``
  • 比如在angular中 以ng-xxx开头的就叫做指令
  • 在vue中 以v-xxx开头的就叫做指令
  • 指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

vue中常用的v-指令演示

  • v-text:元素的InnerText属性,必须是双标签 跟{{ }}效果是一样的 使用较少
  • v-html: 元素的innerHTML
  • v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
  • v-else-if
  • v-else
  • v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换
 v-text 只能用在双标签中
 v-text 其实就是给元素的innerText赋值
 v-html 其实就是给元素的innerHTML赋值
 v-if 如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素
 如果有if和else就不需要单独留坑了
 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
 v-if和v-else-if都有等于对应的值,而v-else直接写
 v-if家族都是对元素进行插入和移除的操作
 v-show是显示与否的问题
 注意: 指令其实就是利用属性作为标识符,简化DOM操作,
  看:v-model="xxx"
  v-model 代表要做什么  xxx代表针对的js内存对象
  写在那个元素上,就对哪个元素操作
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容