首页 > 其他分享 >Vue.js学习记录之在元素与template中使用v-if指令实例(转贴)

Vue.js学习记录之在元素与template中使用v-if指令实例(转贴)

时间:2023-05-19 14:45:26浏览次数:34  
标签:Vue false js template true show1 show2

语法比较简单,直接上代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title></title>
 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="wangtuizhijiademo">
 <p v-if="instruction">在Vue.js中,当判断语句为true,可以显示信息,当为false时候不显示</p>
 <template v-if="show1">
  <p>我是 show1,默认是开启的(true),当你设置false我不显示!</p>
 </template>
 <template v-if="show2">
  <p>我是 show2,默认是关闭的,当你设置show2的值为true,我会被显示!</p>
 </template>
</div>

<script>
 new Vue({
  el: '#wangtuizhijiademo',
  data: {
   instruction:true,
   show1: true,
   show2: true
  }
 })
</script>
</body>
</html>

********************************************************************

true为开启状态,false为关闭状态。

有兴趣的可以试试把 show2: false的false改为true,可以看到两条信息,如下:

在Vue.js中,当判断语句为true,可以显示信息,当为false时候不显示

我是 show1,默认是开启的(true),当你设置false我不显示!

我是 show2,默认是关闭的,当你设置show2的值为true,我会被显示!

标签:Vue,false,js,template,true,show1,show2
From: https://www.cnblogs.com/danbobiji/p/17415076.html

相关文章

  • flvjs使用过程中报The play() request was interrupted by a call to pause()的原因和
    原因:从表层来看,它的原因是因为在播放出来视频之前就已经被调用了pause方法停止了。但是造成这个过程的真正原因是什么呢?资源加载不成功可能是你的接口写错了,导致没有资源,虽然这是一个很小的可能,但是千万不要忽视每一个小的点时机不对这个时候就是说可能你接口是对的,只是获取......
  • Nestjs
    Nest是一个用于构建高效,可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式JavaScript,内置并完全支持 TypeScript(但仍然允许开发人员使用纯JavaScript编写代码)并结合了OOP(面向对象编程),FP(函数式编程)和FRP(函数式响应编程)的元素。在底层,Nest使用强大的HTTPServer框......
  • ExtJs GridPanel 自定义汇总
    {text:'订单金额',dataIndex:'amount',renderer:function(value){returnExt.util.Format.number(value,'0.00');},summaryType:function(records){varamount=0;varlength=records.length;for(var......
  • Vue路由router
    1、总体结构2、路由说明 ......
  • vue component:is 组件切换
    <template><Child1/><Child2/><component:is="currentComp"></component><el-button@click="compChange">切换组件</el-button></template><scriptsetup>import{shallo......
  • js数字超过一万转换为万、亿
    consttransNumberToShort=(value,decimal=2)=>{constBASE=10000;constSIZES=["","万","亿","万亿"];leti=undefined;letstr="";if(isNaN(value)){thrownewError("The......
  • JS函数中的属性
    当定义和调用函数时,JavaScript函数对象会自动具有一些特定的属性,以下是一些常见的属性和方法。1.arguments:arguments是一个类数组对象,它包含了函数调用时传递的参数。它允许你在函数内部访问传递给函数的参数列表,即使在函数定义时未明确声明这些参数。可以通过索引访问argu......
  • 【小小demo】Springboot + Vue 增删改查
    vue-table-ui该工程提供的是一个简单的Vue+Element-UI的表格,增删改查操作。工程代码在最下面。环境jdk1.8ideamavenspringboot2.1.1.RELEASE示例首页查询新增修改删除官方文档Element-Ui:https://element.eleme.cn/#/zh-CN/component/installationV......
  • Mybatis和Mybatis-Plus对MySQL中json类型处理
    目录1MySQL中json类型处理1.1引言1.2准备建表1.3Mybatis1.3.1实体类1.3.2BaseTypeHandler1.3.3application.yml1.3.4修改SQL文件1.4MybatisPlus1.4.1实体类1.4.2application.yml1.4.3SQL文件1MySQL中json类型处理1.1引言mysql5.7开始支持json类型字段点击了解M......
  • JS事件循环机制
    JS事件循环机制需要知道的几个点1.在特定的时间将回调的代码放在回调队里里面去2.初始化代码执行完之后才会去执行回调函数里面的代码3.callbackqueue回调队列(待处理的的回调函数,不一定马上执行)4.浏览器有一些管理模块(DOM事件模块、定时器模块、ajax)  ......