Vue 模板逻辑(条件与循环)

前面的话上一篇文章介绍了Vue.js的基本的模板语法，除了模本语法，还有逻辑语句：条件与循环。这篇文章将介绍Vue.js的条件与循环语句。●条件语句js中的条件语句 if、else、else if，在Vue.js中有类似的指令：v-if、v-else、v-else-if。[v-if]v-if指令：根据表达式的值渲染DOM元素，如果表达式的值是true,那么将元素插入DOM中，否则将从D...

crazy的蓝色梦想

3518人浏览 · 2019-05-14 20:38:21

crazy的蓝色梦想 · 2019-05-14 20:38:21 发布

前面的话

上一篇文章介绍了Vue.js的基本的模板语法，除了模板语法，还有逻辑语句：条件与循环。这篇文章将介绍Vue.js的条件与循环语句。

●条件语句

js中的条件语句 if、else、else if，在Vue.js中有类似的指令：v-if、v-else、v-else-if。

[v-if]

v-if指令：根据表达式的值渲染DOM元素，如果表达式的值是true,那么将元素插入DOM中，否则将从DOM中移除。

 <div id="app">
        <p v-if="seen">我是一个p标签</p>
        <template v-if="ok">
            <h1>hello Vue.js</h1>
            <P>好的代码是时间熬出来的</P>
            <p>坚持就会有回报</p>
        </template>
</div>
<script>
	 new Vue({
        el: "#app",
        data: {
            seen:true,
            ok: true
        }
    })
</script>

上面代码中，如果"seen"的值为true，则"#app"元素显示，否则将从DOM中移除.
如果想切换多个元素，可以把一个元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含元素.
在这里插入图片描述

在这里插入图片描述

[v-else]

可以用 v-else 指令给 v-if 添加一个 “else” 块：

实例：随机生成一个数字，判断是否大于0.5,输出对应的信息

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

在这里插入图片描述

[v-else-if]

用作v-if里的一个else-if块

实例：
下面代码中，当type='A’时，显示内容为A的div；当type='B’时，显示内容为B的div；当type='C’时，显示内容为C的div；否则，显示内容为“NOT A/B/C”的div

 <div id="app3">
        <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:"#app3",
        data:{
            type:'C'
        }
    })
</script>

在这里插入图片描述
注意： v-else、v-else-if必须跟在v-if或者v-else-if之后

●元素不复用

Vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。
这么做，除了是Vue变得非常快之外，还有一些有用的的好处。

例如：如果用户在不同的登录方式之间切换

 <div id="app6">
        <template v-if="loginType === 'username'">
            <label for="">Username:</label>
            <input type="text"placeholder="输入用户名">
        </template>
        <template v-else>
            <label for="">Email:</label>
            <input type="text"placeholder="输入邮箱地址">
        </template>
         <div>
             <button @click="toggle">切换登录方式</button>
         </div>
</div>
<script>
  new Vue({
        el: "#app6",
        data: {
            loginType:"username"
        },
        methods: {
            toggle() {
                if (this.loginType === "username"){
                    this.loginType = '';
                }else{
                    this.loginType = 'username'
                } 

            }
        }
    })
</script>

在这里插入图片描述

[key属性]

Vue提供了一种方式来声明这两个元素是完全独立的—不要复用它们。需要添加一个具有唯一值的key属性即可。

<div id="app7">
        <template v-if="loginType === 'username'">
            <label for="">username</label>
            <input type="text" placeholder="输入用户名"key="username-input">
        </template>
        <template v-else>
                <label for="">Email</label>
                <input type="text" placeholder="输入邮箱地址"key="email-input">
        </template>
        <div>
            <button @click="toggle">切换登录方式</button>
        </div>
 </div>
 <script>
  new Vue({
        el: "#app7",
        data: {
            loginType:"username"
        },
        methods: {
            toggle() {
                if (this.loginType === "username"){
                    this.loginType = '';
                }else{
                    this.loginType = 'username'
                } 

            }
        }
    })
</script>

现在，每一次切换，输入框将被重新渲染
在这里插入图片描述
注意：元素任然会被高效地复用，因为它们没有添加key属性

●元素显隐

[v-show]

v-show: 根据表达式的真假值，切换元素的display属性。当v-show被赋值为true时，元素显示；否则，元素被隐藏。

使用v-show来根据条件展示元素，与v-if的用法类似：区别
在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。
v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

 <div id="app4">
        <p v-show="seen">我是一个p标签</p>
 </div>
<script>
 	new Vue({
        el: "#app4",
        data:{
            seen:true
        }
    })
</script>

在这里插入图片描述

●循环语句

循环使用v-for指令

[v-for迭代数组]

v-for指令die迭代数组需要以site in sites形式的特殊语法，sites是源数据数组并且site是数组元素迭代的别名.

v-for可以绑定数据到数组来渲染一个列表：

 
    <div id="app1">
        <ol>
            <li v-for="(site) in sites">
                {{site.name}}
            </li>
        </ol>
    </div>
    <script>
 	 new Vue({
        el: "#app1",
        data: {
            sites: [
                {name: 'baidu'},
                {name: 'Google'},
                {name: 'Taobao'}
            ]          
        }
    })
</script>

在这里插入图片描述

第二参数为index索引

  <div id="app5">
        <ol>
            <li v-for="(site, index) in sites">
                {{index}} {{site.name}}
            </li>
        </ol>
    </div>
 <script>
 	new Vue({
        el: "#app5",
        data: {
            sites: [
                {name: 'baidu'},
                {name: 'Google'},
                {name: 'Taobao'}
            ]          
        }
    })
</script>

data属性里面有一个sites数组
在这里插入图片描述

[v-for迭代对象]

语法：
v-for="(value, key, index) in object"

<div id="app8">
        <ul>
            <li v-for="value in object">
                {{value}}
            </li>
        </ul>
</div>
<script>
 new Vue({
        el: "#app8",
        data: {
            object: {
                name: "小柒",
                slogan: "小柒爱前端"
            }
        }
    })
</script>

data属性里面有一个object对象
在这里插入图片描述
第二个参数为键名：

   <div id="app9">
        <ul>
            <li v-for="(value, key) in object">
                {{key}} : {{value}}
            </li>
        </ul>
    </div>
<script>
 new Vue({
        el: "#app9",
        data: {
            object: {
                name: "小柒",
                slogan: "小柒爱前端"
            }
        }
    })
</script>

第三个参数为索引：

  <div id="app10">
        <ul>
            <li v-for="(value, key, index) in object">
            {{index}}. {{key}} : {{value}}
            </li>
        </ul>
</div>
<script>
 new Vue({
        el: "#app10",
        data: {
            object: {
                name: "小柒",
                slogan: "小柒爱前端"
            }
        }
    })
</script>

[v-for迭代整数]

<div id="app11">
        <ul>
            <li v-for="n in 10">
                {{n}}
            </li>
        </ul>
 </div>
<script>
 new Vue({
        el: "#app11",
    })
</script>

[注意]：整数迭代是从1开始，而不是从0开始的

参考：
1：Vue菜鸟教程
2：http://www.cnblogs.com/xiaohuochai/p/7294339.html#anchor1

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}$/, //不连续的两位字母// /^