之前写了几个基本的指令的用法，这一次来看看 v-show 的使用，


先看看常规的使用规则：

< div style= "width:300px; height:100px; border:1px solid red;">
< p v-show= "true">v-show的使用 true显示</ p>
< p v-show= "false">v-show的使用 false不显示</ p>
</ div>


也就是说 v-show 后面的是布尔值，如果布尔值是true  ，  那么这个段落显示出来；

如果布尔值是false，那么就不会显示出来；


上面是语法，下面看一个实际使用的例子：

假设我们有一个事件记录的功能，当事件列表为空时，显示：“未添加任何任务”，

                                                   当添加了事件之后，“未添加任何任务”不显示；

那么我们这么写：


< span v-show= "!info.length">未添加任何任务</ span>


info是我们放置添加的事件的数组：

var info =[
{title: "成功的路上并不拥挤"},
{title: "坚持的人并不多"},
{title: "hold on !"}
];


当  info.length等于0时，表明我们的info中没有事件，那么显示上面的提示；

当  info.length等于0时，！info.length等于true，也就是 v-for=“true”，显示提示；


这就是v-for的实际使用方式，通过数据驱动显示，vue的特点；

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue