vue 数据渲染

Posted 2023-03-03

参考技术A 就我目前所知道的渲染方式有  

1.插值表达式

2.v-text

3.v-html

但是使用插值表达式会有一些问题  即插值闪烁

所谓的插值闪烁 就是数据不是预先订好的  而是后期通过网络或者其他方式获取的  存在一定时间的延迟  等待数据准备完毕后才会进行渲染  而在这段空档期   就会显示出插值表达式 即页面中会显示如下的情况

v-text也是负责将数据渲染到页面中去的  使用 v-text 可以完美解决插值闪烁问题   但是 v-text 也不是完美的  v-text 不能识别 标签 （例如 <p></p> , <a></a> 等HTML中的标签）它会将标签一并写入   v-text 只能渲染纯文本的数据

页面结果如下：

v-html 也是负责将数据渲染到页面中去的  使用 v-html 可以完美解决插值闪烁问题  v-html 不会有识别不了页面标签的情况  v-html是既可以识别文本  又可以识别标签

页面结果如下：

v- if  v-else   v-else-if    都与javascript 中的if  else  else if   一样

执行结果如下：

当 a1 为true 时  则是显示  “我是数据一”     

v- if  v-else   v-else-if    只会执行其中一个满足条件的

运行结果如下：

1.v-if  

在条件成立的时候  会创建一个标签即里面的内容    如果条件不成立的时候  那么则会销毁这个标签   在页面中的 （检查 F12    元素 ）也是不存在的

v-if  只会在条件成立时创建

2.v-show

在条件成立的时候  标签会显示出来   不成立的时候 会隐藏起来   v-show 的显示与隐藏都是通过 css 属性设置的  而且在页面中的 （检查 F12    元素 ）也是存在的

v-show 一开始就创建   但判断条件是否满足 来显示与隐藏