VUE中以v开头的代码和if判断

Posted 爱上大树的小猪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE中以v开头的代码和if判断相关的知识,希望对你有一定的参考价值。

v-model="变量名"                双向数据绑定一个变量,基本用在input里获取用户输入的内容
v-bind:class="变量名"huo :class="变量名"    双向数据绑定一个变量,用于改变当前标签的class类和CSS样式内容

if判断

v-if="变量名" 或 v-if="变量名 === 值? 结果:结果" (三目判断)    相当于js的if判断,如果是隐藏则当前标签彻底注释不存在

<p v-if="test"? ‘1‘:‘2‘>如果test的结果是true,则返回1,如果是false则返回2</p>

v-else      同v-if一起用,必须是前后兄弟元素

<p v-if="num">如果num为true,则显示这段文字</p>
<p v-else>否则就显示这段文字</p>

v-show="变量名" true和false的判断 简单的dispaly:none的效果

<p v-show="num">如果num为true,则改当前元素dispaly为block显示,如果是false则改为none隐藏</p>

以上三个的判断,当变量赋值可以为null和undefined 均表示false

 

以上是关于VUE中以v开头的代码和if判断的主要内容,如果未能解决你的问题,请参考以下文章

Vue中v-if和v-show的比较

vue.js的v-if判断数组多少个

如何在vue中优雅地使用v-if判断

如何利用Vue.js库中的v-if内部指令判断元素显示

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段11——vue路由的配置