Vue的条件渲染和列表渲染
Vue的计算属性
- 一、计算属性
- 什么是计算属性
- 计算属性的用法
- computed和methods的区别
前言
这些都是我在学习过程中所记的笔记，如果有错的地方希望大家可以帮我指正。
Vue的条件渲染和列表渲染
一、v-if、v-else-if 、v-else
与JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- v-if 和v-else 之间不能添加任何元素 -->
<h3 v-if="age>18">年龄大于18岁</h3>
<h3 v-else-if="age>14">年龄在18到14之间</h3>
<h3 v-else>年龄在14岁以下</h3>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
message:"小明",
age:8
}
})
</script>
</body>
</html>v-else-if要紧跟v-if,v-else要紧跟着v-else-if或v-if,表达式的值为真时，当前元素/组件及所有节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，最终渲染的结果不会包含元素。
二、v-show
v-show的用法与v-if基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式 display:none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../vue.js" type="text/javascript">
</script>
<body>
<div id="app">
<p v-show="status === 1">当status为1的时候显示</p>
</div>
<script type="text/javascript">
var vue = new Vue({
el:'#app',
data:{
status:2
}
})
</script>
</body>
</html> 
tips: v-show不能在<template>上使用
三、v-if和v-show的选择
v-if 和v-show的功能都有点类似，不过v-if是真正的条件渲染，而v-show只是简单的CSS属性切换，无论条件真与否，都会被编辑。相比之下v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。
四、列表渲染 v-for
当需要将一个数组便利或枚举一个对象循环显示时，就会用到列表渲染指令v-for.它的表达式需要结合in来使用，类似 item in items 的形式。（v-for的表达式支持一个可选参数作为当前项的索引）.
除了数组外，对象的属性也是可以遍历的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../vue.js" type="text/javascript">
</script>
<body>
<div id="app">
<div v-for="(book,index) in books">{{index}}-{{book.name}}
</div>
</div>
</body>
<script >
var app= new Vue({
el:'#app',
data:{
books:[
{
name:'数学书'
},
{
name:'英语书'
},
{
name:'美术书'
}
]
}
})
</script>
</html>
Vue的计算属性
一、计算属性
什么是计算属性
当遇到表达式过长，或逻辑更为复杂的时候应该使用计算属性，所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="../vue.js" type="text/javascript">
</script>
<body>
<div id="app">
{{reversedText}}
<!-- 在实例computed里面写的方法不用加括号 -->
<!-- 在实例methods里面写的方法要加括号 -->
</div>
</body>
<script>
var app =new Vue({
el:"#app",
data:{
text:'123,456'
},
computed:{
reversedText:function(){
return this.text.split(',').reverse().join(',');
//先把字符串转换成字符串数组.取倒序.再把字符串组组成字符串
}
}
})
</script>
</html>计算属性的用法
计算数学还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
<title></title>
</head>
<script src="../vue.js" type="text/javascript">
</script>
<body>
<div id="app">
<div v-for="package in package1 ">
{{package.name}}
{{package.price}}人民币
{{package.count}}
</div>
{{prices}}
</div>
</body>
<script>
var app =new Vue({
el:'#app',
data:{
package1:[
{
name:'iphone 7',
price:7211,
count:2
},
{
name:'iphone 8',
price:4211,
count:2
},
{
name:'iphone 9',
price:3411,
count:2
},
{
name:'iphone 10',
price:6211,
count:2
}
]
},
computed:{
prices: function(){
var prices = 0
for (var i = 0; i < this.package1.length; i++){
prices += this.package1[i].price * this.package1[i].count;
}
return prices;
}
}
})
</script>
</html>computed和methods的区别
首先来看一串代码，分别用computed 和methods 来实现的一个计算面积和周长的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
长度：<input v-model="length" type="text" />
<br /> 宽度：<input v-model="width" type="text" />
<br /> 面积：<input v-model="areas" type="text" />
<button @click="add()">+</button><br /> 和的值为：
<input v-model="num" />
</div>
<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
length: '',
width: '',
num: ''
},
computed: {
areas: function() {
console.log('调用computed')
let areas = 0
areas = this.length * this.width
return areas
/*console.log("computed被调用了")*/
}
},
methods: {
add: function() {
console.log('调用methods')
this.num = parseInt(this.length) + parseInt(this.width)
},
}
})
</script>
</body>
</html>
用computed属性方法编写的逻辑运算，在调用的时候直接将返回值视为一个变量值就可以使用，无需进行函数调用。computed具有缓存功能，在系统刚运行的时候调用一次。只有当计算结果发生变化才会被调用。每次更改就会调用一次。
用methods方法编写的逻辑运算，在调用时一定要加上“( )",调用方法一定要有括号，methods方法页面钢架在的时候调用一次，以后只有被调用的时候调用，触发调用时才会调用一次。
不同的是计算属性是基于变量的值进行缓存的，只要在它关联的变量值发生变化时计算属性就会重新执行，而methods没有缓存，所以每次访问都要重新执行。使用methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性。
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
