Vue-11- 条件渲染
条件渲染
当我们需要根据不同的条件对前端页面进行不同的渲染时,我们就需要用到条件渲染。Vue
为我们提供了 v-if、v-else-if、v-else
方法。
实践
代码
复制代码
页面效果
初始:
输入 A
之后:
输入其他值:
Tips
v-model
实现了输入框内容和数据的绑定。v-if
等实现了根据数据的不同值展示不同的内容。在
v-if
模板中双引号内是单引号。
条件渲染的另一种方式
如上的形式是在页面中直接写上了 v-if
来进行条件判断,这样不是很优雅,我们尝试使用字典,根据不同的 key
来渲染不同的 value
来进行改造。
代码
复制代码
页面效果
初始:
初始
输入 A
:
输入A
输入 D
:
输入D
我们发现针对可以确定的条件和结果,使用字典的方式,页面代码更优雅。不过,v-if
使用起来也是非常不多呢!
以上就是今天的全部内容了,感谢您的阅读,我们下节再会。
版权声明: 本文为 InfoQ 作者【Python研究所】的原创文章。
原文链接:【http://xie.infoq.cn/article/7dba535fa197a9cfc57adc0ed】。文章转载请联系作者。
评论