跟着大佬技术胖学vue系列-Hello World与初学vue的v-if,v-show,v-for指令
2020/3/13 11:32:14
本文主要是介绍跟着大佬技术胖学vue系列-Hello World与初学vue的v-if,v-show,v-for指令,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
跟着大佬技术胖学vue系列
每天学一点,自己总结一下。记录一个萌新的爬坑之路,如果有错欢迎各位大佬指正O(∩_∩)O
创建一个vue
单页面直接引入vue.js文件, 之后创建vue实例。
<script type="text/javascript" src="./../js/vue.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { isLogin: 'true', isShow: false } }) </script> 复制代码
之后在div中绑定
<div id="app"> <!--自己的内容--> </div> 复制代码
完成
vue的v-if,v-show,v-for指令
v-if,v-show
v-if和v-show用法相同,绑定值判断是否显示区别在于v-if是判断是否加载模块,v-show是改变css(display:none)。
<script type="text/javascript"> var app = new Vue({ el: "#app", data: { isLogin: 'true', isShow: false } }) </script> 复制代码
<div id="app"> <h1 v-if="isLogin">if显示</h1> <h1 v-else="!isLogin">if不显示</h1> <h1 v-show="isShow">if不显示</h1> </div> 复制代码
v-for
v-for用于循环输出,格式为
v-for="item in items"
基础用法:
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { arrayitem: [1, 85, 25, 12, 6, 18, 0.5, , 1, ], }, computed: { sortArrayItem: function() { return this.arrayitem.sort(sortNum) } } }) // 数组排序 function sortNum(a, b) { return (a - b) } </script> 复制代码
<ol> <li v-for="item in arrayitem">{{item}}</li> </ol> <ul> <li v-for="(newitem,index) in sortArrayItem">{{index+1}}-{{newitem}}</li> </ul> 复制代码
首先sort()函数,方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的,所以首先应该把数组元素都转化成字符串(如有必要),以便进行比较。 function sortNum(a, b) { return (a - b) } ,a-b升序,b-a降序。
另外备注一点,
<li v-for="(newitem,index) in sortArrayItem">{{index+1}}-{{newitem}}</li> 复制代码
for循环,这里的sortArrayItem不直接用arrayitem因为在data里面声明的数据源不能被污染,有保护机制。
对象排序:
<script type="text/javascript"> var app = new Vue({ el: '#app', data: { students: [{ name: 'xiaoqiang', age: '15' }, { name: 'zhangsan', age: '19' }, { name: 'xiag', age: '24' }, { name: 'abc', age: '5' }, { name: 'yinzi', age: '66' }, ] }, computed: { sortStudent: function() { return (sortStudentAge(this.students, 'age')) // return (sortStudentAge(this.students, this.students.age)) }, sortStudentAgeArr: function() { return this.students.sort(sortStudentAgeB(this.students.age)) // return students.sort(sortStudentAgeB('age')) } } }) // 对象排序 // function sortStudentAge(arr, key) { function sortStudentAge(studentsArr, age) { console.log(studentsArr) console.log(studentsArr[0].age) return studentsArr.sort(function(a, b) { let x = a.age; let y = b.age; return (x - y < 0 ? -1 : 1) }) } function sortStudentAgeB(params) { return function(a, b) { let x = a.params; let y = b.params; return x - y } } </script> 复制代码
<ul> <li v-for="studentitem in sortStudent"> {{studentitem.name}}-{{studentitem.age}} </li> </ul> <hr> <ul> <h2>age</h2> <li v-for="item in sortStudentAgeArr"> {{item.name}}-{{item.age}} </li> </ul> 复制代码
结语
每天记录一下学了什么,希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。😂
这篇关于跟着大佬技术胖学vue系列-Hello World与初学vue的v-if,v-show,v-for指令的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南