尚硅谷前端框架vue语法(二)
一.class绑定(会动态改变的class需要用到class绑定)
写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于:类名不确定,要动态获取。
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。例子:
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>绑定样式</title><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 --><div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/><!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div> <br/><br/><!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'尚硅谷',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false,},},methods: {changeMood(){const arr = ['happy','sad','normal']const index = Math.floor(Math.random()*3)this.mood = arr[index]}},})</script></html>
二.列表渲染
v-for指令: 简单来说,就是用v-for遍历时,需要加不同的key值
1.用于展示列表数据
2.语法:v-for="(item, index) in xxx" :key="yyy" v-for="temi xxx" :key="yyy"
3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少) <!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><!-- 遍历数组 --><h2>人员列表(遍历数组)</h2><ul><li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li></ul><!-- 遍历对象 --><h2>汽车信息(遍历对象)</h2><ul><li v-for="(value,k) of car" :key="k">{{k}}-{{value}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{persons:[{id:'001',name:'张三',age:18},{id:'002',name:'李四',age:19},{id:'003',name:'王五',age:20}],car:{name:'奥迪A8',price:'70万',color:'黑色'},}})</script> </html>
三、列表过滤
利用filter函数:
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><ul><li v-for="(p,index) of filPerons" :key="index">{{p.name}}-{{p.age}}-{{p.sex}}</li></ul></div><script type="text/javascript">Vue.config.productionTip = false//用watch实现//#region /* new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}],filPerons:[]},watch:{keyWord:{immediate:true,handler(val){this.filPerons = this.persons.filter((p)=>{return p.name.indexOf(val) !== -1})}}}}) *///#endregion//用computed实现new Vue({el:'#root',data:{keyWord:'',persons:[{id:'001',name:'马冬梅',age:19,sex:'女'},{id:'002',name:'周冬雨',age:20,sex:'女'},{id:'003',name:'周杰伦',age:21,sex:'男'},{id:'004',name:'温兆伦',age:22,sex:'男'}]},computed:{filPerons(){return this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1})}}}) </script> </html>
四.列表排序
这里涉及一个sort排序的问题
当我们想要对arr数组正序或逆序排序时,可以用如下操作:
arr.sort((p1,p2)=>{ //进行升序或降序排序return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>列表排序</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h2>人员列表</h2><input type="text" placeholder="请输入名字" v-model="keyWord"><button @click="sortType = 2">年龄升序</button><button @click="sortType = 1">年龄降序</button><button @click="sortType = 0">原顺序</button><ul><li v-for="(p,index) of filPerons" :key="p.id">{{p.name}}-{{p.age}}-{{p.sex}}<input type="text"></li></ul></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el:'#root',data:{keyWord:'',sortType:0, //0原顺序 1降序 2升序persons:[{id:'001',name:'马冬梅',age:30,sex:'女'},{id:'002',name:'周冬雨',age:31,sex:'女'},{id:'003',name:'周杰伦',age:18,sex:'男'},{id:'004',name:'温兆伦',age:19,sex:'男'}]},computed:{filPerons(){const arr = this.persons.filter((p)=>{return p.name.indexOf(this.keyWord) !== -1})//判断一下是否需要排序if(this.sortType){arr.sort((p1,p2)=>{ //进行升序或降序排序return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age})}return arr}}}) </script> </html>
js中的两个api:
Object.keys //将对象转化为数组
Object.defineproperty :
①创建属性。如果对象中不存在指定的属性
②修改属性。如果属性已经存在,
③添加多个属性和默认值
④自定义 Setters 和 Getters。
尚硅谷前端框架vue语法(二)相关推荐
- 尚硅谷前端视频总结(二)
尚硅谷前端视频总结(二) 原文链接 动画animation CSS animation 属性是 animation-name,animation-duration, animation-timing- ...
- 前端 | ( 十一)CSS3简介及基本语法(上) | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
- 前端 | (二)各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
- 尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
- 详细总结流行前端框架Vue重难点概念
详细总结流行前端框架Vue重难点概念 1 什么是Vue? 2 Vue基本属性 3 Vue基本指令 4 组件化 4.1 创建组件 4.1.1 注册全局组件 4.1.2 注册局部组件 4.2 组件通信 5 ...
- 尚硅谷前端HTML-CSS /HTML
尚硅谷前端HTML-CSS/HTML 软件分类 系统软件 应用软件 游戏软件 软件:客户端 服务器. 客户端 –文字客户端 –图形化界面 C/S – 网页. B/S 优点 不需要安装.无需更新 跨平台 ...
- 前端 | ( 九)尚品汇实操练习 | 尚硅谷前端html+css零基础教程2023最新
学习来源:尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记: [HTML4](一)前端简介 [HTML4](二)各种各样的常用标签 [HTML4](三)表单 ...
- JavaWeb前端框架VUE和Element组件详解
文章目录 前言 一.前端框架--VUE 1.1 概述 1.2 快速入门 1.3 Vue 指令 1.3.1 v-bind & v-model 指令 1.3.2 v-on 指令 1.3.3 条件判 ...
- vue ui框架_你为什么要使用前端框架Vue?
1.前端框架的根本意义 1.1 前端框架的好处 最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框 ...
最新文章
- vue 热更新无反应_不吹不黑谈谈 vue 的 SFC 和 template
- 编程语言使用率的统计与简单分析
- 双显示器设置:如何设置一台电脑两个显示器
- Python中出现:AttributeError: module 'numpy' has no attribute 'dtype'问题解决
- Oracle数据库日期格式转换操作
- webservice wsdl 生成服务
- 为什么CAD导出PDF没有颜色
- 计算机视觉与机械专业相关吗,计算机视觉在早期森林火灾探测中的应用研究-精密仪器及机械专业论文.docx...
- 用python制作二维码_使用python制作二维码
- NumPy入门讲座(3):操作数组
- Tailwind Typographic
- choose when otherwise,otherwise不起作用
- 论文简读《视听觉深度伪造检测技术研究综述》
- 游戏背景音乐风格大致分类
- 时事热点型软文怎么写?
- 消息队列mqtt取消订阅的回调
- 旅行世界显示服务器繁忙,旅行世界,玩法介绍!无充值入口,每日遛狗赚
- javascript 常用代码大全(超级收藏,强烈推荐)(4)
- java修改手机锁屏密码,Android 处理屏幕解锁和设置锁屏密码
- c语言gga字符串校验和代码,一种新的Java智能卡上字节码校验算法.pdf
热门文章
- 3d打印【遇到的问题】--卷边、倒塌、slic3r
- [ECCV2018]Generating 3D faces using Convolutional Mesh Autoencoders
- Point Estimation
- 基于皮尔逊相关系数的电影智能推荐系统
- linux 临时文件夹设置,Linux 系统 tmp 目录的安全设置
- PDF文件进行在线分割如何去操作
- Jquery版本对IE浏览器的支持
- 计算机基础知识教程 pdf,《计算机基础知识教程》.pdf
- python执行其它py_如何在一个py程序里执行另一个py程序?
- Elasticsearch别名(aliases)使用