首页 > 其他分享 >总结vue3 的一些知识点:​Vue.js 条件语句​

总结vue3 的一些知识点:​Vue.js 条件语句​

时间:2023-06-02 18:33:58浏览次数:48  
标签:el Vue 知识点 app else 指令 js true

Vue.js 条件语句

条件判断

v-if

条件判断使用 v-if 指令:

v-if 指令

在元素 和 template 中使用 v-if 指令:

<div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术,更是梦想!</p>
      <p>哈哈哈,打字辛苦啊!!!</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>

这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:


<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块:

v-else 指令

随机生成一个数字,判断是否大于0.5,然后输出对应信息:

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

v-else-if

v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

v-else 指令

判断 type 变量的值:

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素:

v-show 指令

<h1 v-show="ok">Hello!</h1>

标签:el,Vue,知识点,app,else,指令,js,true
From: https://www.cnblogs.com/sdges/p/17452673.html

相关文章

  • jmeter-JSON提取器
    1、介绍在JMeter中先访问登录接口,使用后置处理器提取出来token或者Cookie的值,然后将该值带到后续的业务接口中,这时就会用到JSON提取器组件。为什么要用JSON提取器JSON是目前大多数接口响应内容的数据格式。在接口测试中,不同接口之间可能会有数据依赖,在JMeter中可以通过后置......
  • 基于 Vue BootStrap的迷你Chrome插件
    安装安装VisualStudioCode和Chrome,自行翻墙详细安装这里略过安装包管理工具用管理员身份运行cmd,输入:npminstall-gbower(全局安装)创建新建目录brochure进入目录运行bowerinstallbootstrap@3vueaxios成功!新建css,js目录,并在对应的目录下面新建index.css和inde......
  • mpvue两小时,产出一个《点钞辅助工具》小程序
    CoffeeScript,Pug,Sass使用以下内容门槛较高,如看不懂或觉得需要继续了解,请前往官网查阅相关文档,谢谢。文章不做技术语法解读,如不清楚,请前往对应官网了解细节。启动项目由于使用了CS,Pug,Sass等非主流方式,所以便多出了一些流程:根据官方拉取快速启动项目,并命名为“MergeMoney”,不要vuex与......
  • bootstrap.bundle.min.js bootstrap.bundle.min.js.map 404报错
    main.js导入 import'./assets/bootstrap.bundle.min.js'浏览器报如下告警信息:DevToolsfailedtoloadsourcemap:Couldnotloadcontentforhttp://localhost:5173/src/assets/bootstrap.bundle.min.js.map:HTTP错误:状态代码404,net::ERR_HTTP_RESPONSE_CODE_FAILU......
  • vue中(input组件)textarea文本提交到后端数据库,前端输出保存换行回车及修改显示
    1.修改css中white-space属性为“pre-warp”在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示,取值有:normal:默认,忽略文本中所有的空白、换行符;只有文本存在<br>或文本达到框的约束时,文本才会换行nowrap:和normal类似,忽略文本中所有的空白、换行......
  • vue项目中实现监听键盘按键事件
    created(){this.keyDown();},beforeDestroy(){this.keyDownReview();},methods:{//按键恢复keyDownReview(){document.onkeydown=function(event){vare=event||window.event;e.returnValue=true;};},......
  • springboot项目rabbitmq消费者消费json格式的String,出现无限循环抛出No method found
    转:springboot项目rabbitmq消费者消费json格式的String,出现无限循环抛出Nomethodfoundforclass[B     ......
  • vue-element-admin安装依赖报错问题
    vue-element-admin安装依赖的时候报以下错误npmERR!codeENOENTnpmERR!syscallspawngitnpmERR!pathgitnpmERR!errno-4058npmERR!enoentAnunknowngiterroroccurrednpmERR!enoentThisisrelatedtonpmnotbeingabletofindafilenpmERR!enoentnpmE......
  • 使用Hutool的@Alias注解和JSONUtil.toJsonStr()的问题记录
    表格如下: 定义类结构如下:  使用fastjson转换后的结果                                使用hutool的JSONUtil转换之后的结果      可以看到JSONUtil类转换之后格式并不是我们需要的类的字......
  • Vue修改数组、对象并且触发视图更新的方法以及原理
    一、数组 items:['a','b','c'];//一个普通的数组this.items[1]='x';//修改已有项this.items[3]='d';//新增一项this.item.length=2;//修改数组的长度//一个对象数组msg:[{id:1,selected:true,title:'aaa',},{i......