Vue模板的操作方法

View就是View模板,HTML视图,DOM结构

v-if:确定元素是否在视图中存在

在这里插入图片描述
在这里插入图片描述
v-if 控制视图是存在,来控制元素是否存在,如果显示为false,在Dom节点中就不存在,找不到该元素。
v-if =""的值放的就是 data里面的数据。

v-show:确定元素是否显示,用display设置样式block为显示,none为隐藏。

在这里插入图片描述
在这里插入图片描述
v-show通过控制Dom节点的display样式,block为显示,none为隐藏,但是存在于节点中。

v-bind:绑定属性,添加动态值时。

v-bind:href="links“ => :href=“links”

在这里插入图片描述

v-once:当数据改变时,插值处的内容不会更新

v-for :使用item in items,用循环数组,遍历数组的索引值

  • {{item.username}}
  • {{index}}{{item.username}}
  • 索引值从0开始 ![查询从0开始的数组数据](https://img-blog.csdnimg.cn/20200217132950495.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW95c2E=,size_16,color_FFFFFF,t_70)
    发布了1 篇原创文章 · 获赞 0 · 访问量 38

    猜你喜欢

    转载自blog.csdn.net/cainiaoysa/article/details/104348471
    今日推荐