vue学习笔记（v-if v-else v-show v-for）-panda
程序员文章站
2023-12-23 12:33:52
...
第一季 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'>{{index}}{{student.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'>{{index}}{{student.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>