• 尚硅谷前端框架vue语法(二)

    一.class绑定(会动态改变的class需要用到class绑定)

     写法:class="xxx" xxx可以是字符串、对象、数组。
     字符串写法适用于：类名不确定，要动态获取。
     对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
     数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

     例子:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>绑定样式title>
    6. 		<style>
    7. 			.basic{
    8. 				width: 400px;
    9. 				height: 100px;
    10. 				border: 1px solid black;
    11. 			}
    12. 			
    13. 			.happy{
    14. 				border: 4px solid red;;
    15. 				background-color: rgba(255, 255, 0, 0.644);
    16. 				background: linear-gradient(30deg,yellow,pink,orange,yellow);
    17. 			}
    18. 			.sad{
    19. 				border: 4px dashed rgb(2, 197, 2);
    20. 				background-color: gray;
    21. 			}
    22. 			.normal{
    23. 				background-color: skyblue;
    24. 			}
    25.  
    26. 			.atguigu1{
    27. 				background-color: yellowgreen;
    28. 			}
    29. 			.atguigu2{
    30. 				font-size: 30px;
    31. 				text-shadow:2px 2px 10px red;
    32. 			}
    33. 			.atguigu3{
    34. 				border-radius: 20px;
    35. 			}
    36. 		style>
    37. 		<script type="text/javascript" src="../js/vue.js">script>
    38. 	head>
    39. 	<body>
    40. 		
    41. 		<div id="root">
    42. 			
    43. 			<div class="basic" :class="mood" @click="changeMood">{{name}}div> <br/><br/>
    44.  
    45. 			
    46. 			<div class="basic" :class="classArr">{{name}}div> <br/><br/>
    47.  
    48. 			
    49. 			<div class="basic" :class="classObj">{{name}}div> <br/><br/>
    50.  
    51. 		div>
    52. 	body>
    53.  
    54. 	<script type="text/javascript">
    55. 		Vue.config.productionTip = false
    56. 		
    57. 		const vm = new Vue({
    58. 			el:'#root',
    59. 			data:{
    60. 				name:'尚硅谷',
    61. 				mood:'normal',
    62. 				classArr:['atguigu1','atguigu2','atguigu3'],
    63. 				classObj:{
    64. 					atguigu1:false,
    65. 					atguigu2:false,
    66. 				},
    67.  
    68. 			},
    69. 			methods: {
    70. 				changeMood(){
    71. 					const arr = ['happy','sad','normal']
    72. 					const index = Math.floor(Math.random()*3)
    73. 					this.mood = arr[index]
    74. 				}
    75. 			},
    76. 		})
    77. 	script>
    78. 	
    79. html>

    二.列表渲染

     v-for指令:  简单来说，就是用v-for遍历时，需要加不同的key值
                     1.用于展示列表数据
                      2.语法：v-for="(item, index) in xxx" :key="yyy"    v-for="temi xxx" :key="yyy"    
                       3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

    1. ​
    2. html>
    3. <html>
    4. 	<head>
    5. 		<meta charset="UTF-8" />
    6. 		<title>基本列表title>
    7. 		<script type="text/javascript" src="../js/vue.js">script>
    8. 	head>
    9. 	<body>
    10.  
    11. 		
    12. 		<div id="root">
    13. 			
    14. 			<h2>人员列表（遍历数组）h2>
    15. 			<ul>
    16. 				<li v-for="(p,index) of persons" :key="index">
    17. 					{{p.name}}-{{p.age}}
    18. 				li>
    19. 			ul>
    20.  
    21. 			
    22. 			<h2>汽车信息（遍历对象）h2>
    23. 			<ul>
    24. 				<li v-for="(value,k) of car" :key="k">
    25. 					{{k}}-{{value}}
    26. 				li>
    27. 			ul>
    28.  
    29. 		div>
    30.  
    31. 		<script type="text/javascript">
    32. 			Vue.config.productionTip = false
    33. 			
    34. 			new Vue({
    35. 				el:'#root',
    36. 				data:{
    37. 					persons:[
    38. 						{id:'001',name:'张三',age:18},
    39. 						{id:'002',name:'李四',age:19},
    40. 						{id:'003',name:'王五',age:20}
    41. 					],
    42. 					car:{
    43. 						name:'奥迪A8',
    44. 						price:'70万',
    45. 						color:'黑色'
    46. 					},
    47. 				}
    48. 			})
    49. 		script>
    50. html>
    51.  
    52. ​

     

     三、列表过滤

    利用filter函数:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>列表过滤title>
    6. 		<script type="text/javascript" src="../js/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="root">
    11. 			<h2>人员列表h2>
    12. 			<input type="text" placeholder="请输入名字" v-model="keyWord">
    13. 			<ul>
    14. 				<li v-for="(p,index) of filPerons" :key="index">
    15. 					{{p.name}}-{{p.age}}-{{p.sex}}
    16. 				li>
    17. 			ul>
    18. 		div>
    19.  
    20. 		<script type="text/javascript">
    21. 			Vue.config.productionTip = false
    22. 			
    23. 			//用watch实现
    24. 			//#region 
    25. 			/* new Vue({
    26. 				el:'#root',
    27. 				data:{
    28. 					keyWord:'',
    29. 					persons:[
    30. 						{id:'001',name:'马冬梅',age:19,sex:'女'},
    31. 						{id:'002',name:'周冬雨',age:20,sex:'女'},
    32. 						{id:'003',name:'周杰伦',age:21,sex:'男'},
    33. 						{id:'004',name:'温兆伦',age:22,sex:'男'}
    34. 					],
    35. 					filPerons:[]
    36. 				},
    37. 				watch:{
    38. 					keyWord:{
    39. 						immediate:true,
    40. 						handler(val){
    41. 							this.filPerons = this.persons.filter((p)=>{
    42. 								return p.name.indexOf(val) !== -1
    43. 							})
    44. 						}
    45. 					}
    46. 				}
    47. 			}) */
    48. 			//#endregion
    49. 			
    50. 			//用computed实现
    51. 			new Vue({
    52. 				el:'#root',
    53. 				data:{
    54. 					keyWord:'',
    55. 					persons:[
    56. 						{id:'001',name:'马冬梅',age:19,sex:'女'},
    57. 						{id:'002',name:'周冬雨',age:20,sex:'女'},
    58. 						{id:'003',name:'周杰伦',age:21,sex:'男'},
    59. 						{id:'004',name:'温兆伦',age:22,sex:'男'}
    60. 					]
    61. 				},
    62. 				computed:{
    63. 					filPerons(){
    64. 						return this.persons.filter((p)=>{
    65. 							return p.name.indexOf(this.keyWord) !== -1
    66. 						})
    67. 					}
    68. 				}
    69. 			}) 
    70. 		script>
    71. html>

     四.列表排序

    这里涉及一个sort排序的问题

    当我们想要对arr数组正序或逆序排序时，可以用如下操作：

    1. arr.sort((p1,p2)=>{    //进行升序或降序排序
    2.   return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>列表排序title>
    6. 		<script type="text/javascript" src="../js/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 		<div id="root">
    11. 			<h2>人员列表h2>
    12. 			<input type="text" placeholder="请输入名字" v-model="keyWord">
    13. 			<button @click="sortType = 2">年龄升序button>
    14. 			<button @click="sortType = 1">年龄降序button>
    15. 			<button @click="sortType = 0">原顺序button>
    16. 			<ul>
    17. 				<li v-for="(p,index) of filPerons" :key="p.id">
    18. 					{{p.name}}-{{p.age}}-{{p.sex}}
    19. 					<input type="text">
    20. 				li>
    21. 			ul>
    22. 		div>
    23.  
    24. 		<script type="text/javascript">
    25. 			Vue.config.productionTip = false
    26. 			
    27. 			new Vue({
    28. 				el:'#root',
    29. 				data:{
    30. 					keyWord:'',
    31. 					sortType:0, //0原顺序 1降序 2升序
    32. 					persons:[
    33. 						{id:'001',name:'马冬梅',age:30,sex:'女'},
    34. 						{id:'002',name:'周冬雨',age:31,sex:'女'},
    35. 						{id:'003',name:'周杰伦',age:18,sex:'男'},
    36. 						{id:'004',name:'温兆伦',age:19,sex:'男'}
    37. 					]
    38. 				},
    39. 				computed:{
    40. 					filPerons(){
    41. 						const arr = this.persons.filter((p)=>{
    42. 							return p.name.indexOf(this.keyWord) !== -1
    43. 						})
    44. 						//判断一下是否需要排序
    45. 						if(this.sortType){
    46. 							arr.sort((p1,p2)=>{	//进行升序或降序排序
    47. 								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
    48. 							})
    49. 						}
    50. 						return arr
    51. 					}
    52. 				}
    53. 			}) 
    54.  
    55. 		script>
    56. html>

    js中的两个api:

    Object.keys           //将对象转化为数组 

    Object.defineproperty      :

      ①创建属性。如果对象中不存在指定的属性

      ②修改属性。如果属性已经存在，

      ③添加多个属性和默认值

      ④自定义 Setters 和 Getters。

  • 相关阅读:
    强化学习入门
    《基于 Vue 组件库 的 Webpack5 配置》8.在生成打包文件之前清空 output(dist) 目录（两种方式）
    深入浅出-多进程编程
    Kernel Memory 入门系列： RAG 简介
    商业银行云模式下的技术变革
    DOS 命令集合
    04 【Sass语法介绍-运算】
    mybatis实战：四、insert 用法（普通插入、返回主键自增的值）
    TeeChart NET for Blazor v2022
    split和join方法用于字符串和数组的转换
  • 原文地址：https://blog.csdn.net/m0_64226820/article/details/128018868