精华内容
下载资源
问答
  • <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script> head> <body> <div id="app"> <h2 v-if='true'>{{message}}h2> <h2 v-if='imshow'>{{message}}h2> <h2 v-else>imshow为false时,显示我...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <!-- 当v-if中的值为true则执行;为false则不执行 -->
            <h2 v-if='true'>{{message}}</h2><br>
            
            <h2 v-if='imshow'>{{message}}</h2>
            <h2 v-else>imshow为false时,显示我</h2>
        </div>
        <script>
            var vm=new Vue({
               el: '#app',
               data: {
                  message: 'hello' ,
                  imshow: true
               },
               computed: {},
               methods: {}
            })
        </script>
    </body>
    
    </html>
    

    对于div中的三行代码,第一行是将v-if给写死,由于为true,则会显示message。

    第二行和第三行,如果imshow,否则执行else后面的语句。

    则测试,首先imshow的值为true,显示message。
    在这里插入图片描述
    当通过f12里的console,修改imshow的值为false,则执行第二行语句。

    在这里插入图片描述

    案例练习1

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <h2 v-if= 'score>=90'>优秀</h2>
            <h2 v-else-if= 'score>=80'>良好</h2>
            <h2 v-else-if= 'score>=60'>及格</h2>
            <h2 v-else>不及格</h2>
        </div>
        <script>
            var vm=new Vue({
               el: '#app',
               data: {
                   score: 99
               },
               computed: {},
               methods: {}
            })
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    案例练习2

    用户选择登陆方式,是账号登陆还是邮箱登录。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </head>
    
    <body>
        <div id="app">
            <span v-if='isuser'>用户账号:<input type="text"></span>
            <span v-else>用户邮箱:<input type="text"></span>
            <button @click='change()'>切换类型</button>
        </div>
        <script>
            var vm=new Vue({
               el: '#app',
               data: {
                   isuser:true
               },
               computed: {},
               methods: {
                   change(){
                       this.isuser = !this.isuser
                   }
               }
            })
        </script>
    </body>
    
    </html>
    

    点击切换类型按钮,可以实现登陆方式的改变。

    在这里插入图片描述
    但该案例有一个小问题,如果还需要增加一个切换类型时,同时清空text内容的操作。

      <span v-if='isuser'>用户账号:<input type="text" key='username'></span>
      <span v-else>用户邮箱:<input type="text" key='email'></span>
    

    解决的方法是将两个key设置为不同的值,则此时input就不会复用。

    展开全文
  • { me.type='D' } else if (e==='医院') { me.type='F' } else if (e==='银行') { me.type='G' } else if (e==='化工园区') { me.type='H' } else if (e==='九小场所') { me.type='I' } } }, css部分 .navigation{ ...

    div部分

    导航部分

    判断 active 跟item 相等的时候 用navigationA 样式 否则 就用 navigation样式

    {{item}}

    导航内容

    判断 type = 'A' 的时候显示

    里面是组件

    里面是组件

    Not A/B/C

    js部分内容

    //数据

    data() {

    return {

    active :'背景概述',

    navigation:'navigation',

    type:'A',

    navarr:[

    '背景概述',

    '商业综合楼宇',

    '住宅酒店',

    '校园',

    '医院',

    '银行',

    '化工园区',

    '九小场所'

    ]

    }

    },

    //方法

    methods: {

    navclick(item){

    let me =this

    console.log(item)

    //将点击的元素的索引赋值给变量

    me.active = item

    let e =item

    if (e==='背景概述') {

    me.type='A'

    }

    else if (e==='商业综合楼宇') {

    me.type='B'

    }

    else if (e==='住宅酒店') {

    me.type='C'

    }

    else if (e==='校园') {

    me.type='D'

    }

    else if (e==='医院') {

    me.type='F'

    }

    else if (e==='银行') {

    me.type='G'

    }

    else if (e==='化工园区') {

    me.type='H'

    }

    else if (e==='九小场所') {

    me.type='I'

    }

    }

    },

    css部分

    .navigation{

    border-right:1px solid #E9E9E9;

    color:#000000;

    font-size:16px;

    height:60px;

    line-height:60px;

    }

    .navigationA{

    border-top:3px solid #E50000;

    border-right:1px solid #E9E9E9;

    color:#E50000;

    font-size:16px;

    height:60px;

    line-height:57px;

    }

    展开全文
  • 原标题:vue.js的条件渲染,其实就是模板里面写if else模板里面写逻辑判断在早期只有二种方法,一是用什么插件来搞;二是自己写一个模板然后正则匹配判断结果去替换字符串。其实这二种方法都是一样的,因为什么模板...

    原标题:vue.js的条件渲染,其实就是模板里面写if else

    模板里面写逻辑判断在早期只有二种方法,一是用什么插件来搞;二是自己写一个模板然后正则匹配判断结果去替换字符串。其实这二种方法都是一样的,因为什么模板的插件十有八九也得自己来写。

    烦的很,所以早期模板的功能也很弱,基本上只能是view的展现而已。

    vue的条件渲染很好用,至少它在模板语言里实现了逻辑判断。别的不说, 我在2013的前后使用过Handlebars这个模板,它的if什么的功能就很弱,弱到几乎等于没有。

    这里提一下渲染这个词,其实就是生成dom节点。跟浏览器的渲染过程基本没关系,同学们不要一看到前端渲染就觉得很高大上,其实就是一些dom,然后到一些dom上去而已。要不就是删除一些再生成再添加,反正就这么回事。

    我如果说错了,欢迎来喷我,Orz

    回说vue的条件渲染,它使用的指令是v-if,后面还有个v-else,这二个要写到dom上,然后v-else的dom必须跟着v-if,形成一个if else的判断结构。

    Now you see me

    Now you don't

    还有v-else-if,也得紧跟着,中间不能有其它元素,

    A

    B

    C

    Not A/B/C

    vue的教程写到这里,感觉vue的学习曲线应该是比react要缓和一些。就是很直观,很“自然语言”。

    看资料说,v-if的切换消耗资源会多些,也许这里是一个web性能优化的点。

    责任编辑:

    展开全文
  • 文章目录一、简单的演示二、v-if的使用三、v-if和v-else的使用三、v-if和v-else-if的使用 一、简单的演示 <body> <div id="app"> <p v-if="score>=90">优秀</p> <p v-else-if=...


    一、简单的演示

    <body>
      <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=60">及格</p>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            score: 90,
          }
        })
      </script>
    </body>
    

    二、v-if的使用

    通过 v-if 里面表达式的结果, 如果为true , 则显示当前行, 反之不显示.

    <body>
      <div id="app">
        <!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
        <p v-if="score>=90">优秀</p>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            score: 90,
          }
        })
      </script>
    </body>
    

    三、v-if和v-else的使用

    当v-if后面表达式的值为true的时候显示v-if所在的元素
    当v-if后面表达式的值为false的时候显示v-else所在的元素

    <body>
      <div id="app">
        <!-- 当变量score大于等于90的时候, 当前行显示, 当小于90的时候, 当前行不显示 -->
        <!-- 当条件满足时显示当前行 -->
        <p v-if="score>=90">优秀</p>
        <!-- 当条件不满足时显示当前行 -->
        <p v-else>其他</p>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            score: 80,
          }
        })
      </script>
    </body>
    

    三、v-if和v-else-if的使用

    <body>
      <div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            score: 50,
          }
        })
      </script>
    </body>
    

    四、案例 (点击切换登录方式)

    <body>
      <div id="app">
        <span>
          <p v-if="isShow">用户账号: <input type="text"></p>
          <p v-else>手机账号: <input type="text"></p>
          <button @click="isShow = !isShow">切换类型</button>
        </span>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            isShow: true,
          },
        })
      </script>
    </body>
    

    案例小问题

    如果在有输入内容的情况下切换了类型, 我们会发现文字依然显示之前输入的内容.

    这是因为Vue在进行DOM渲染时, 出于性能考虑, 会尽可能的复用已经存在的元素, 而不是重新创建新的元素

    如果不希望Vue出现类型重复利用的问题, 可以给对应的input添加key, 并且保证key不同

    <body>
      <div id="app">
        <span>
          <p v-if="isShow">用户账号: <input type="text" key="key" placeholder="用户账号"></p>
          <p v-else>手机账号: <input type="text" key="key2" placeholder="手机账号"></p>
          <button @click="isShow = !isShow">切换类型</button>
        </span>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            isShow: true,
          },
        })
      </script>
    </body>
    

    五、v-if和v-show对比

    v-show的用法和v-if非常相似, 都是用于决定一个元素是否渲染.

    v-if和v-show的区别

    v-if当条件为false时, 不会有对应的元素在DOM中
    v-show当条件为false时, 仅仅是将元素的display属性设置为none而已.

    各自的使用场景

    当需要在显示与隐藏之间切换很频繁时, 使用v-show
    当只有一次切换时, 使用 v-if

    展开全文
  • Vue中的v-if和v-else

    2021-03-27 09:23:16
    一、v-if和v-else v-if判断语句之用,v-else则是和v-if一起出现,当v-if判断为true时,v-else不执行;当v-if判断为false时,v-else才执行。 源码01: <!DOCTYPE > <html> <head> <meta ...
  • 首先讲讲大家在工作中经常用到的 v-if、v-else、v-else-if 指令,这些指令是在模板编译阶段实现的。 1,v-if v-if 的用法如下所示: <template> <div id="app"> <h1 v-if="isShow">Hello ...
  • v-if指令用于动态渲染一块内容,只有当该指令的表达式值为true时才渲染,也可配套使用v-else指令设置一个else-if块和else块 <h1 v-if="ifSee">hello Vue3.0!</h1> <h1 v-else-if="ifSeeMore">...
  • 我这里使用vue_cli进行的开发,本人也是正在学习中,这里是对自己学习的笔记。 v-if 对于v-if的赋值都是布尔型也就是“是与否”,当v-if的值为true时对所在标签下的内容进行展现,当值为false时会对标签下的内容进行...
  • else-if; else:语法 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"> <...
  • <template> <div class="hello"> <!-- 写法1 --> ...label v-if="count <...label v-else-if="count === 0">我诞生了</label> <label v-else-if="count <= 3">我还是个婴儿
  • v-if用于条件判断,判断dom元素是否显示 例:判断学生成绩 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> ...
  • vue——v-if、v-else用法

    2021-11-06 14:06:37
    v-else则是在v-if不存在且不显示时显示存在出来。 这样我们就可以利用这个特性做一些东西了 <div id="app"> <div v-if="str>0">三仟</div> <div v-else>墨染</div> </div&...
  • 一、v-if、 v-else、 v-else-if的用法 代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下:vue html代码块:abcnot a/b/cvue js代码块:var divapp = new vue({el: '#divapp',data:{isactive: ...
  • 最近平台中有一个需求:读取excel...实现步骤简单来说有两步,这里会逐步展开来说,也会说明下每一步最开始的写法,然后一步步优化,消除多个 if else 语句,使代码更加简洁,这个过程中逐步地进行抽象封装。 一、读..
  • Vue中v-if v-else-if v-else(Vue笔记:二) v-if控制元素是否被创建: 用法:v-if="boolean" 参数:可以为任意js数据,隐式转化布尔类型后为false或true false:不创建元素,用html注释代替 true:创建元素 <div...
  • 情况一:做vue项目,有的时候会遇到有几个元素都使用同一个v-if条件。 下面这种方法虽然可以实现,但是整体代码看起来有点笨拙,我们可以用<template>标签进行优化一下。 <template> <div class=...
  • 使用flag标识符结合v-if和v-else切换组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta ...
  • console.log(name1) } if (name2) { // 等于空字符串也不会走进来 console.log(name2) } if (name3) { // 等于0也不会走进来 console.log(name3) } if (name11) { // 不等于0可以走进来 console.log(name11) } if ...
  • div v-if='xians'> 这里是要显示的内容 </div> <div v-else> 这里是不需要显示的内容 </div> //判断路由 data(){ return { xians:this.$route.path.includes('/print') } } ...
  • Vue.js if 语句

    2021-03-07 07:25:21
    条件判断v-if条件判断使用 v-if 指令:v-if 指令在元素 和 template 中...new Vue({el: '#app',data: {seen: true,ok: true}})这里, v-if 指令将根据表达式 seen 的值 (true 或 false ) 来决定是否插入 p 元素。...
  • need some help, thanks.I don't know how to write the proper condition in vue for my task.i got those 2 valuescontent.Image &header.BackgroundBasically what i want to do is to check if there is a j...
  • vue指令 v-show和v-if 目标: 控制标签的隐藏或出现 语法: v-show=“vue变量” v-if=“vue变量” 原理 v-show 用的display:none隐藏 (频繁切换使用) v-if 直接从DOM树上移除 高级 v-else使用 <...
  • v-if、v-else-if和v-else与计算属性computed对比 对于条件判断指令不够深入,特此与计算属性computed做个简单对比,加深一下对于这个的理解。如果有小伙伴想要深入了解Vue.js框架的条件渲染可以去官方文档看一下哦。...
  • vue中v-if使用方法详解

    2021-06-16 03:08:44
    vue提供了一个用于判断的v-if 、v-else语法,可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏1、新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建...
  • 例子:90-100 A级 80-90 B级 包括90 70-80 C级 包括80 60-70 D级 包括70 60以下 不及格 不包括60 var i =prompt("请输入你的分数"); if(i>90){ // 当i大于90时弹出A级框,小于则进入else 进行下一个...}else if(i
  • Vue-v-if及switch的使用

    2021-03-09 14:17:28
    script src="js/vue.js"></script> <title> vue的实例</title> </head> <body> <!--2. 指定一个div层,用于绑定vue实例--> <div id="app"> <!--v-pre:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 159,119
精华内容 63,647
关键字:

elseifvue

vue 订阅