Vue---条件语句和循环语句（一）

条件语句

程序媛-jjl

3524人浏览 · 2017-12-21 13:13:11

程序媛-jjl · 2017-12-21 13:13:11 发布

条件语句

v-if

在Vue中，我们可以使用 v-if 指令实现条件判断功能。

<div v-if="seen">you can saw me </div>

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -条件语句 </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div v-if="seen">you can saw me </div>
</div>
	
<script>
new Vue({
  el: '#app',
	data:{
		seen:true
	}
})
</script>
</body>
</html>

如果‘seen’为true显示，反之不显示。

在 template 中使用 v-if 指令：

案例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">you now saw me</p>
    <template v-if="ok">
      <h1>学习</h1>
      <p>啊哟！不错哟</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

v-else

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

案例3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div v-if="number > 0.5">
	  {{number}}大于0.5
	</div>
	<div v-else>
	 {{number}}小于0.5
	</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data:{
	  number:Math.random()
	}
})
</script>
</body>
</html>

v-else-if

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

案例4

<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="interest === 'Sing'">
      I  like  Sing
	</div>
	<div v-else-if="interest === 'Dance'">
	  I  like  Sing
	</div>
	<div v-else-if="interest === 'KnockCode'">
	  I  like  Knock code
	</div>
	<div v-else>
	 I dont like anything ！
	</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    interest: 'KnockCode'
  }
})
</script>
</body>
</html>

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

案例5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 用 key 管理可复用的元素</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <template v-if="loginType === 'username'">
  <label>Username </label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email </label>
  <input placeholder="Enter your email address" key="email-input">
</template>
    <br>
<button v-on:click='changeType'>change login way</button>
</div>
    
<script>
new Vue({
  el: '#app',
    data:{
        loginType:'username'
    },
     methods: {
         changeType:function(){
             return this.loginType=this.loginType ==='username'?'email':'username'
         }
     }
})
</script>
</body>
</html>

代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， <input> 不会被替换掉——仅仅是替换了它的 placeholder 。所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

案例6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -v-show测试</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>
</body>
</html>

v-show 和v-if 可实现相同的功能，两者有什么区别呢？

v-if 和 v-show 的区别：

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

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