1.条件判断

  1. v-if:用于条件判断的指令。

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

	<div id='app'>
        <p v-if="seen">现在可以被看到</p>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            seen: false
        }
    })
  1. v-else:可以用 v-else 指令给 v-if 添加一个 “else” 块。

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

	<div v-if="Math.random() > 0.5">
        大于 0.5
    </div>
    <div v-else>
        不大于 0.5
    </div>
  1. v-else-if:用作 v-ifelse-if 块。可以链式的多次使用。
	<div id='app'>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            Not A/B
        </div>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            type: 'C'
        }
    })

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

  1. v-show:根据条件展示元素。
	<div id='app'>
        <p v-show='ok'>Hello vue!</p>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            ok: true
        }
    })

2、v-if 与 v-show 的区别

  1. v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
  2. v-show 仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
  3. 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if较好。

3. 循环语句

循环使用 v-for指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

  1. v-for 可以绑定数据到数组来渲染一个列表。
	<div id='app'>
        <ol>
            <li v-for="site in sites">
                {{site.name}}
            </li>
        </ol>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            sites: [
                {name: '张三'},
                {name: '李四'},
                {name: '王五'},
            ]
        }
    })

在这里插入图片描述

  1. 模板中使用 v-for
	<div id='app'>
        <ul>
            <template v-for="site in sites">
                <li>{{site.name}}</li>
                <li>------</li>
            </template>
        </ul>
    </div>
  1. v-for 迭代对象:v-for 可以通过一个对象的属性来迭代数据
	<div id='app'>
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
    </div>

	var vm = new Vue({
        el: '#app',  
        data:{
            object: {
                name: '菜鸟',
                url: 'http://www.xxx.com',
                slogan: '学的不仅是技术,更是梦想!'
            }
        }
    })

在这里插入图片描述

  1. v-for 迭代对象:也可以提供第二个的参数为键名
	<li v-for="(value, key) in object">
        {{key}} : {{value}}
    </li>

在这里插入图片描述

  1. v-for 迭代对象:也可以提供第三个的参数为索引
	<li v-for="(value, key, index) in object">
        {{index}} : {{key}} : {{value}}
    </li>

在这里插入图片描述

  1. v-for 迭代对象:也可以循环整数
	// 输出1-10
	<div id="app">
  		<ul>
    		<li v-for="n in 10">
     		{{ n }}
    	</li>
  		</ul>
	</div>

在这里插入图片描述
不积跬步无以至千里 不积小流无以成江海

Logo

前往低代码交流专区

更多推荐