vue学习笔记（v-if v-else v-show v-for）-panda
Posted Vivianluolita
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue学习笔记（v-if v-else v-show v-for）-panda相关的知识，希望对你有一定的参考价值。
第一季 vue基本指令
v-if v-else v-show
<h1>v-if v-else v-show</h1>
<div id="app">
<div v-if='islogin'>你好 lee</div>
<div v-else>请登录</div>
<div v-show='isshow'>你好 v-show</div>
</div>
<script type="text/javascript">
var app= new Vue(
el:'#app',
data:
islogin:true,
isshow:true
//if else
)
</script>v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。
快捷键：art+shift+下箭头 ：复制一行
v-for
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。哪里需要循环就把v-for放哪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
item
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue(
el:'#app',
data:
items:[20,23,18,65,32,19,54,56,41]
)
</script>
</body>
</html>排序：在输出item前进行编程
（1）对属性的保护机制
computed:
Items:function()
return this.items
```
正确的
computed:
Items:function()
return this.items.sort()
错误的我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。
computed:
ItemsSort:function()
return this.items.sort();
v-for处也要将items改写
（2）
<body>
<h1>v-for</h1>
<div id="app">
<ul>
<li v-for='item in itemsSort'>item</li>
</ul>
</div>
<script type="text/javascript">
var app= new Vue(
el:'#app',
data:
items:[22,33,44,55,666,77]
,
computed:
itemsSort:function()
return this.items.sort(sortNumber);
,
)
function sortNumber(a,b)
return a-b
</script>
</body>输出对象形式
<h1>v-for</h1>
<div id="app">
<ul>
<li v-for='item in itemsSort'>item</li>
</ul>
<ul>
<li v-for='(student,index) in students'>indexstudent.name-student.age</li>
</ul>
</div>
<script type="text/javascript">
var app= new Vue(
el:'#app',
data:
items:[22,33,44,55,666,77],
students:[
name:"liyj",age:"22",
name:"lihj",age:"23",
name:"lihj",age:"23",
name:"zjh",age:"24"
]
,
computed:
itemsSort:function()
return this.items.sort(sortNumber);
,
)
function sortNumber(a,b)
return a-b
</script>对数组进行排序
<h1>v-for</h1>
<div id="app">
<ul>
<li v-for='item in itemsSort'>item</li>
</ul>
<!-- 对象被重写 -->
<ul>
<li v-for='(student,index) in sortStudent'>indexstudent.name-student.age</li>
</ul>
</div>
<script type="text/javascript">
var app= new Vue(
el:'#app',
data:
items:[22,33,44,55,666,77],
students:[
name:"liyj",age:"22",
name:"lihj",age:"23",
name:"lihj",age:"23",
name:"zjh",age:"21"
]
,
computed:
itemsSort:function()
return this.items.sort(sortNumber);
,
// 数组方法被改写
sortStudent:function()
return sortByKey(this.students,'age');
)
function sortNumber(a,b)
return a-b
//数组对象方法排序:
function sortByKey(array,key)
return array.sort(function(a,b)
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
);
</script>以上是关于vue学习笔记（v-if v-else v-show v-for）-panda的主要内容，如果未能解决你的问题，请参考以下文章
Vue风格指南 - v-if/v-else-if/v-else下的key
[Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)