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 ...
随机推荐
- 关于javascript，多种函数封装！！
1.获取最终的属性 function getStyleAttr(obj, attr){ if(window.getComputedStyle){ return window.getComputedSt ...
- 不了解MES系统中的看板管理?看完本文就懂了
如果想要在生产车间中,让生产过程管理都处在“看得见”的状态,那么看板可视化管理的导入是你的不二选择. MES看板包括四个部分:生产任务看板.各生产单位生产情况看板.质量看板和物料看板,其中生产任务看板 ...
- Can't toast on a thread that has not called Looper.prepare()
Android开发中Can't toast on a thread that has not called Looper.prepare()问题 说一下问题出现场景: 在一个Android项目中,利用 ...
- tcp_tw_recycle参数引发的数据库连接异常
[问题描述] 开发反馈有个应用在后端数据库某次计划性重启后经常会出现数据库连接异常问题,通过监控系统的埋点数据,发现应用连接数据库异常有两类表现: 其一:连接超时 131148.00ms To ...
- udf文件十六进制
如下为网上找的前辈们的UDF(以做记录) set @a = unhex('7F454C4602010100000000000000000003003E0001000000800A00000000000 ...
- vue-cli 3 和 vue-cli 2的区别
分享文章: 浅谈vue-cli 3 和 vue-cli 2的区别 https://blog.csdn.net/weixin_42080056/article/details/81631661 vue- ...
- JMockit学习笔记
一.在eclipse下建立JMockit工程 1.下载最新版JMockit(jmockit-1.4.zip): 2.解压后的文件夹包含有:library jars, source files, sam ...
- c# 第五节 第一个控制台程序、第一个桌面、快捷键、注释
本节内容: 1:控制台程序的创建 2:第一个桌面程序 3:快捷键 4:注释 一.第一个控制台程序: 这就是控制台程序: 打开你的vs2015,按如下操作 二.第一个桌面程序 比如当我们删除一个东西会弹 ...
- zookeeper 链接报错 KeeperErrorCode = NodeExists for
zookeeper 链接报错 CONNECTING Receive watched event:WatchedEvent state:SyncConnected type:None path:nul ...
- OpenStack产品摘要
docs OpenStack 核心服务 计算 Nova:虚拟化设施资源管理 ZUN:容器管理 QINLING:Serveless Function 裸金属 IRONIC:裸金属资源管理 CYBORDF ...