vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
1.条件语句
vue中条件语句类似于JS语法的if-else语句。当然可以用!表示非。v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
例如：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js"></script>
</head> <body>
<h1>if 语句</h1>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-if="!seen">现在你看不到到我了</p>
<template v-if="ok">
<h6>vue教程</h6>
</template>
</div>
<script>
var appIf = new Vue({
el: '#app',
data: {
seen: false,
ok: true
}
})
</script> <h1>if - else 语句</h1>
<div id="app2">
<div v-if="Math.random() > 0.5">
大于0.5
</div>
<div v-else>
小于等于0.5
</div>
</div>
<script>
var app2 = new Vue({
el: '#app2'
})
</script> <h1>if - else if - else 语句</h1>
<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>
var app3 = new Vue({
el: '#app3',
data: {
type: 'C'
}
})
</script>
</body> </html>
结果：
补充：我们也可以使用 v-show 指令来根据条件展示元素：
<h1>if 语句</h1>
<div id="app">
<h1 v-show="seen">Hello!</h1>
</div>
<script>
var appIf = new Vue({
el: '#app',
data: {
seen: false,
ok: true
}
})
</script>
结果：
补充：v-if和v-show的区别
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
补充：v-if判断数组的长度：
<div v-if="remarks.length > 0">
<div v-for="(remark,index) in remarks" style="margin-top: 20px;" :key="index">
<span>第{{ index + 1 }}楼</span>
<span style="margin-left: 5px;">{{ remark.creator }}</span>
<span style="margin-left: 5px;">{{ remark.createtimeStr}}</span>
<br />
<span>{{ remark.content }}</span>
</div>
</div>
<div v-else>
暂无评论
</div>
2.循环语句
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for用法1和模板中v-for用法最常用，而且模板元素template在渲染页面之后不会呈现。
例如：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js"></script>
</head> <body>
<h4>v-for用法1</h4>
<div id="app1">
<ol>
<li v-for="site in sites">
{{ site.name }}
</li>
</ol>
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
sites: [{
name: 'Runoob'
},
{
name: 'Google'
}
]
}
})
</script> <h4>模板中v-for</h4>
<div id="app2">
<ol>
<template v-for="site in sites">
<li>{{ site.name }}</li>
</template>
</ol>
</div>
<script>
var app2 = new Vue({
el: '#app2',
data: {
sites: [{
name: 'Runoob'
},
{
name: 'Google'
}
]
}
})
</script> <h4>v-for迭代对象</h4>
<div id="app3">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
var app3 = new Vue({
el: '#app3',
data: {
object: {
name: 'vue',
url: 'http://vue.com'
}
}
})
</script> <h4>v-for迭代对象2（提供第二个的参数为键名）</h4>
<div id="app4">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
var app4 = new Vue({
el: '#app4',
data: {
object: {
name: 'vue',
url: 'http://vue.com'
}
}
})
</script> <h4>v-for迭代对象2（提供第二个的参数为键名,第三个参数为索引）</h4>
<div id="app5">
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script>
var app5 = new Vue({
el: '#app5',
data: {
object: {
name: 'vue',
url: 'http://vue.com'
}
}
})
</script> <h4>v-for迭代整数</h4>
<div id="app6">
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
</div>
<script>
var app6 = new Vue({
el: '#app6'
})
</script>
</body> </html>
结果：
补充：v-for遍历对象一般会定义一个key，一般写法如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js"></script>
</head> <body>
<h4>v-for用法1</h4>
<div id="app1">
<ol>
<li v-for="(item, index) in sites" :key="index">
{{ item.name }}
</li>
</ol>
</div>
<script>
var app1 = new Vue({
el: '#app1',
data: {
sites: [{
name: 'vue'
},
{
name: 'Google'
}
]
}
})
</script>
</body> </html>
结果：
3.计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。
如果我们反转一个字符串最原始的方法是：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'vue 6A!'
}
})
</script>
上面代码不易理解。
(1)使用计算属性进行反转： (computed调用方法是属性的调用方式 {{field}} )
例如：声明一个计算属性 reversedMessage 。提供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
message: 'vue 6A!'
},
computed: {
// 计算属性的 getter
reversedMessage: function() {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('');
}
}
})
</script>
结果：
(2)使用methods实现(作为方法调用，需要 {{ functionName () }})
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
例如：cnt 是独立于 vm 对象的变量。在使用 reversedMessage 这个计算属性的时候，第一次会执行代码，得到一个值，以后再使用 reversedMessage 这个计算属性，因为 vm 对象没有发生改变，于是界面渲染就直接用这个值，不再重复执行代码。而 reversedMessage2 没有这个缓存，只要用一次，函数代码就执行一次，于是每次返回值都不一样。
<div id="app">
<p>原始字符串: {{ message }}</p>
<h2>computed计算的属性</h2>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
<h2>methods返回的结果</h2>
<p>计算后反转字符串: {{ reversedMessage2() }}</p>
<p>计算后反转字符串: {{ reversedMessage2() }}</p>
</div> <script>
var cnt = 1;
var vm = new Vue({
el: '#app',
data: {
message: 'vue 6A!'
},
computed: {
// 计算属性的 getter
reversedMessage: function() {
// `this` 指向 vm 实例
cnt += 1;
return cnt + this.message.split('').reverse().join('')
}
},
methods: {
reversedMessage2: function() {
cnt += 1;
return cnt + this.message.split('').reverse().join('')
}
}
})
</script>
结果：
(3)computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
<script>
var vm = new Vue({
el: '#app',
data: {
name: '百度',
url: 'http://www.baidu.com'
},
computed: {
site: {
// getter
get: function() {
return this.name + ' ' + this.url + " changed"
},
// setter
set: function(newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'vue: https://cn.vuejs.org/';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
document.write('<br>');
document.write('site: ' + vm.site);
</script>
结果：
4.侦听器-watch对象和$watch实例方法
Vue.js 监听属性用 watch，我们可以通过 watch 来响应数据的变化。
例如：实现一个计数器监听
<div id="app">
<p style="font-size:25px;">计数器: {{ counter }}</p>
<button @click="counter++" style="font-size:25px;">点我</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
}
});
// 监听counter属性的变化。nval是新值，oval是旧值
vm.$watch('counter', function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>
或者：
<div id="app">
<p style="font-size:25px;">计数器: {{ counter }}</p>
<button @click="counter++" style="font-size:25px;">点我</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
counter: 1
},
watch: {
counter: function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
}
}
});
</script>
结果：
例如：实现千米与米之间的单位转换。
以下代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。
<div id="computed_props">
千米 : <input type="text" v-model="kilometers"> 米 : <input type="text" v-model="meters">
</div>
<p id="info"></p>
<script type="text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers: 0,
meters: 0
},
methods: {},
computed: {},
watch: {
kilometers: function(val) {
console.log(1);
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters: function(val) {
console.log(2);
this.kilometers = val / 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function(newValue, oldValue) {
console.log(3);
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
结果：改变千米值的时候可以看到打印的顺序是1、2、1、3
vue条件语句、循环语句、计算属性、侦听器监听属性的更多相关文章
- Python 2.7 学习笔记 条件与循环语句
本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...
- 【Python】-NO.99.Note.4.Python -【Python3 条件语句 循环语句】
1.0.0 Summary Tittle:[Python]-NO.99.Note.4.Python -[Python3 条件语句 循环语句] Style:Python Series:Python Si ...
- Python中的条件和循环语句
条件和循环语句 1. 条件语句 if单用 格式:if 条件表达式 例如:if 5 > 3: print('True') >>> 'True' #当条件满足时才会执行上述操作. ...
- #7 Python顺序、条件、循环语句
前言 上一节讲解了Python的数据类型和运算,本节将继续深入,涉及Python的语句结构,相当于Python的语法,是以后编写程序的重要基础! 一.顺序语句 顺序语句很好理解,就是按程序的顺序逻辑编 ...
- python系列八：Python3条件控制&循环语句
#!/usr/bin/python #-*-coding:gbk-*-#Python3 条件控制&循环语句import randomage = int(input("请输入你的年龄: ...
- python实例 条件和循环语句
#! /usr/bin/python #条件和循环语句 x=int(input("Please enter an integer:")) if x<0: x=0 ...
- python学习第四讲,python基础语法之判断语句,循环语句
目录 python学习第四讲,python基础语法之判断语句,选择语句,循环语句 一丶判断语句 if 1.if 语法 2. if else 语法 3. if 进阶 if elif else 二丶运算符 ...
- vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- r语言之条件、循环语句
if条件语句:if (conditon) {expr1} else {expr2} > x<-1> if(x==1)+ {x<-"x=1"}else+ {x ...
随机推荐
- Java生鲜电商平台-redis缓存在商品中的设计与架构
Java生鲜电商平台-redis缓存在商品中的设计与架构 说明:Java开源生鲜电商平台-redis缓存在商品中的设计与架构. 1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而 ...
- mpvue小程序开发之 实现一个弹幕评论
先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> ...
- sublime_text运行python ctrl+b运行的界面隐藏了怎么重新调出来恢复显示?
sublime_text运行python ctrl+b运行的界面隐藏了怎么重新调出来恢复显示?搜索了下都是说怎么隐藏的,隐藏后怎么恢复显示的没找到看进程还在运行,但调不出来看运行结果了,console ...
- maven 学习---使用Maven运行单元测试
要通过Maven运行单元测试,发出此命令: mvn test 这会在你的项目中运行整个单元测试. 案例学习 创建两个单元测试,并通过 Maven 的运行它.参见一个简单的 Java 测试类: pack ...
- bat弹出确认或取消窗口
需要在bat脚本里面弹出取消/确认框提示,可以用下面的案例: 示例: @echo off setlocal enabledelayedexpansion set Vbscript=Msgbox(&qu ...
- IBM LOTUS DOMINO 9 部署SSL证书
前言 随着SHA1算法在2016年12月31日以后,将被强制淘汰,所有新的SSL证书都必须支持SHA256算法,所以我们必须将IBM Domino Server升级到9.0以上才可以支持SHA256算 ...
- 理解serialVersionUID是什么？有什么用？如何生成？
如果您曾经实现过Serializable接口,则必须遇到此警告消息 The serializable class xxx does not declare a static final serialV ...
- 剖析linux内核中的宏---------container_of
#define container_of(ptr, type, member) ({ \ const typeof(((type *)0)->member) * __mptr = (ptr); ...
- 201871010136-赵艳强《面向对象程序设计（java）》第十四周学习总结
201871010136-赵艳强<面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh ...
- jmeter引用jar包的3种方式
示例 实现对登录密码进行MD5加密 pom文件依赖 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --& ...