前端框架vue的样式操作,以及vue提供的属性功能应用实战

news/2024/5/25 10:09:45/文章来源:https://blog.csdn.net/littlefun591/article/details/136711687

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,前后端开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,面试宝典等分享。

所属的专栏:前端零基础,高阶应用实战教学
景天的主页:景天科技苑

文章目录

  • 1.vue样式操作
    • 1控制标签class类名
    • 2.控制标签style样式
    • 3.列表渲染指令v-for
  • 2.Vue对象提供的属性功能
    • 1.过滤器
    • 2.计算属性
    • 3.监听属性
    • 4.用户输入用户名长度限制

1.vue样式操作

1控制标签class类名

显示不同的标签效果,样式效果,可以像v-bind一样使用
格式:

   <h1 :class="">元素</h1>  值可以是对象、对象名、数组(数组的方式用的比较少)data(){return {num:11,xx:'c1',}}

可以根据数据属性,控制样式显示

<div id="app" ><p :class="xx">床前明月光</p><p :class="{c1:num<=10,c2:num>10}">床前明月光</p><!-- class类值控制语法: :class='{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}'布尔值或者得到布尔值的算式: 里面直接可以使用数据属性--></div>

也可以跟后面,相当于添加个类

  <p class="c1" :class="{c2:num<=10}">床前明月光</p>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-bind不支持这种写法
在这里插入图片描述
在这里插入图片描述

2.控制标签style样式

格式1:值是json对象,对象写在元素的:style属性中
标签元素:

         <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div><!-- 注意:不能出现中横杠,有的话就仿照'font-size',或者去掉横杠,后一个单词的首字母大写,比如fontSize -->   有-的css属性名称,要改为驼峰格式data数据如下:data: {activeColor: 'red',fontSize: 30}

在这里插入图片描述

格式2:值是对象变量名,对象在data中进行声明
标签元素:

               <div v-bind:style="styleObject"></div>data数据如下:data: {styleObject: {color: 'red',fontSize: '13px'  }}

格式3:
在这里插入图片描述

实例-vue版本选项卡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#card{width: 500px;height: 350px;}.title{height:50px;}.title span{width: 100px;height: 50px;background-color:#ccc;display: inline-block;line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */text-align:center;}.content .list{width: 500px;height: 300px;background-color: yellow;display: none;}.content .active{display: block;}.title .current{background-color: yellow;}</style><script src="vue.js"></script>
</head>
<body><div id="card"><div class="title"><span @click="num=1" :class="{current:num===1}">国内新闻</span>   #绑定点击事件,一点击,num的值就发生变化,后面class类值根据num的值做判断,满足条件展示current类样式<span @click="num=2" :class="{current:num===2}">国际新闻</span><span @click="num=3" :class="{current:num===3}">银河新闻</span><!--<span>{{num}}</span>--></div><div class="content"><div class="list" :class="{active:num===1}">国内新闻列表</div><div class="list" :class="{active:num===2}">国际新闻列表</div><div class="list" :class="{active:num===3}">银河新闻列表</div></div></div><script>// 思路:// 当用户点击标题栏的按钮[span]时,显示对应索引下标的内容块[.list]// 代码实现:var card = new Vue({el:"#card",data:{num:0,},});</script></body>
</html>

在这里插入图片描述

3.列表渲染指令v-for

在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。
在这里插入图片描述

 <!-- value是数组中的元素,index是索引,注意v-for一定要写 :key -->       加上key不会出现顺序混乱问题,原来生成的标签不会再重新生成

提高页面渲染性能,value和index两个形参叫什么都行

数据是数组:

<div id="app" ><ul><!-- value是数组中的元素,index是索引,注意v-for一定要写 :key --><li v-for="(value,index) in hobby_lst" :key="index">{{value}}--{{index}}</li>
<!--        <li v-for="(value,index) in hobby_lst">{{value}}-&#45;&#45;{{index}}</li>--></ul></div>

在这里插入图片描述
在这里插入图片描述

数据是对象:

<ul><!--i是每一个value值--><li v-for="value in book">{{value}}</li>
</ul>
<ul><!--value是每一个value值,attr是每一个键名--><li v-for="(value,attr) in book">{{attr}}:{{value}}</li>
</ul>
<script>var vm1 = new Vue({el:"#app",data:{book: {// "attr属性名":"value属性值""id":11,"title":"图书名称1","price":200},},})
</script>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

小练习
goods:[
{“name”:“python入门”,“price”:150},
{“name”:“python进阶”,“price”:100},
{“name”:“python高级”,“price”:75},
{“name”:“python研究”,“price”:60},
{“name”:“python放弃”,“price”:110},
]

把上面的数据采用table表格输出到页面,价格大于60的那一条数据需要添加背景色
在这里插入图片描述
在这里插入图片描述

浏览器展示
在这里插入图片描述

2.Vue对象提供的属性功能

到目前为止,我们了解到Vue的 el,data,methods 三个属性
接下来,我们一起探索其他属性

1.过滤器

过滤器,类似Django模板的过滤器。就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中。
定义过滤器的方式有两种,全局和局部过滤器

想在100后面加个 元 怎么办
在这里插入图片描述

使用过滤器
1、局部过滤器,在vue对象里面通过filters属性来定义。只能在当前vue对象中使用
//局部过滤器使用,单体模式定义函数,函数名称就是过滤器名称,里面的参数就是要过滤的数据,比如接收price,返回price元
filters:{
yuan(val){
return val +‘元’
}
}
在这里插入图片描述

html中使用

<div id="app"><h1>{{price|yuan}}</h1></div>

在这里插入图片描述
在这里插入图片描述

可以动态保留几位小数
//局部过滤器使用,单体模式定义函数,函数名就是过滤器名称。里面的参数就是要过滤的数据,比如接收price,返回price元
filters:{
yuan(val){
return val +‘元’
},
keeppoint(val,n){
return val.toFixed(n)
}
}

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

全局过滤器,多个vue对象都可以使用
通过Vue.filter方法定义全局过滤器
//全局过滤器,在vue对象外面定义,第一个参数是过滤器名称。第二个函数是过滤器要做的事
Vue.filter(‘RMB’,function (val){
return val +‘人民币’
})

在这里插入图片描述
在这里插入图片描述

可以连续使用多个过滤器
在这里插入图片描述
在这里插入图片描述

2.计算属性

我们之前学习过字符串反转,如果直接把反转的代码写在元素中,则会使得其他同事在开发时时不易发现数据被调整了,
所以vue提供了一个计算属性(computed),可以让我们把调整data数据的代码存在在该属性中。其实计算属性主要用于监听,可以监听多个对象,后面学了监听之后再说。
compuetd里面可以直接写方法

//对内部属性字符串进行拼接
computed:{showaa(){//这里定义字符串拼接规则let str = this.name + '的爱好是'+ this.hobbyreturn str}
}

在这里插入图片描述

html中直接调用定义的计算方法名
在这里插入图片描述

浏览器展示
在这里插入图片描述

3.监听属性

侦听属性,可以帮助我们侦听data某个数据的变化,从而做相应的自定义操作。
侦听属性是一个对象,它的键是要监听的对象或者变量,值一般是函数,当侦听的data数据发生变化时,会自定执行的对应函数,
这个函数在被调用时,vue会传入两个形参,第一个是变化后的数据值,第二个是变化前的数据值。

当data中对应的属性值发生变化时,对应watch中设置的方法就会被触发

语法

watch:{
}watch:{// 'pp':function (){//// },// price(){//     alert(this.name + this.pp + '有危险!!!!')// }//  不支持这种写法// info.num(){//     console.log(this.info.num);// }// 监听嵌套数据的写法'info.num':function (){console.log(this.info.num);}}//监听属性,当属性值发生变化,触发监听方法执行watch:{//写法,方式1:'price':function (){alert(this.name+'的'+this.wallet+ '中的钱发生了变化!!!!')}}

watch监听的方法名 一定得是data属性中的属性名
在这里插入图片描述
在这里插入图片描述

一点击按钮,就会触发弹窗
在这里插入图片描述

点击确定后,price的值确实发生变化
在这里插入图片描述

        //写法方式2:单体模式price(){alert(this.name+'的'+this.wallet+ '中的钱发生了变化!!!!')}

在这里插入图片描述

当data中的数据属性是个对象时,单体模式就不能使用了,只能使用方式1
比如要监听info的num值变化,这样就无法使用方式2.。只能使用方式1
在这里插入图片描述

对于数据嵌套
在这里插入图片描述

正确嵌套写法
在这里插入图片描述
在这里插入图片描述

点击触发
在这里插入图片描述

4.用户输入用户名长度限制

结合v-model和watch

//监听属性,当属性值发生变化,触发监听方法执行
watch: {username(){console.log(this.username)if (this.username.length > 6){alert('太长了');//slice切片,开始索引,结束索引this.username = this.username.slice(0,6);}}}

在这里插入图片描述

html双向绑定
在这里插入图片描述
在这里插入图片描述

确定后,得到截取的前六位
在这里插入图片描述

总结,本章主要讲述vue的样式操作和常见的一些属性功能应用方法,下一章我们继续Vue框架深层次应用,感兴趣的朋友不妨点个关注不迷路,see you !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1007588.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Element-Plus: Select组件实现滚动分页加载

Element-Plus的select组件并没有自带滚动分页加载的功能&#xff0c;其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换&#xff1a; 但如果不想通过点击分页按钮的方式&#xff0c;利用滚动触底进行下一页加载的话&#xff0c;…

【设计模式】二、UML 类图与面向对象设计原则 之 UML概述

二、UML 类图与面向对象设计原则 &#xff08;一&#xff09;UML 类图 UML 概述类与类的UML图示类之间的关系 &#xff08;二&#xff09;面向对象设计原则 单一职责原则&#xff08;Single Responsibility Principle, SRP&#xff09;开闭原则&#xff08;Open-Closed Princip…

搜维尔科技:OptiTrack新型动捕相机最大限度地提高远距离精度

新的Primex 120和Slimx 120相机采用了最高分辨率。 3D追踪系统的全球领导者OptiTrack宣布推出三款最先进的运动捕捉相机:Primex120、Primex120W和Slimx120。新的更高分辨率相机提供了OptiTrack所期望的精度&#xff0c;具有更高的分辨率和更大的视野。这些新功能使更大的跟踪区…

Notepad++从文件夹查找文本内容

目录 一、背景二、Notepad搜索2.1 测试用例2.2 操作说明 一、背景 在日常的办公、学习或编程中&#xff0c;我们时长会遇到需要在大量文件中搜索特定文本内容的情况&#xff1a; 无论是快速定位某个项目中的代码片段&#xff1b;还是检索文档资料库中的相关信息等。 掌握如何…

探索非监督学习:解决聚类问题

目录 1 非监督学习的概念1.1 非监督学习的定义1.2 非监督学习的重要性 2 聚类问题的定义和意义2.1 聚类问题的定义2.2 聚类问题的意义2.3 聚类问题在非监督学习中的地位 3 聚类算法介绍3.1 K均值聚类3.2 层次聚类3.3 密度聚类 4 聚类问题的评估4.1 内部评估指标4.2 外部评估指标…

网络编程套接字(4)——Java套接字(TCP协议)

目录 一、Java流套接字通信模型 二、TCP流套接字编程 1、ServerSocket ServerSocket构造方法&#xff1a; ServerSocket方法: 2、Socket Socket构造方法&#xff1a; Socket方法&#xff1a; 三、代码示例&#xff1a;回显服务器 1、服务器代码 代码解析 2、客户端…

和泓海棠府——与阳光大海约会 悦享惬意生活

海南三亚海棠湾 四季如春的梦想在这里即可实现和泓海棠府 与阳光大海约会 悦享惬意生活 如果在三亚有一套房 你就可以把父母接过来一起住 尽己所能让老人圆一个海居梦 带着孩子一起在园林里探索自然 陪孩子度过每一个有趣的海边假期 你也可以随时沿着会唱歌的沙滩迎风漫…

Php和h5等静态文件的服务容器化部署(下)

一、接着上文 上文介绍了php/h5程序的部署过程&#xff0c;最后是通过slb把不同的服务暴露给外部。 本文试着把外部的配置交待清楚&#xff0c;包括&#xff1a; kong配置ingress配置 部署逻辑图见下&#xff1a; 总结&#xff1a; 去掉slb&#xff0c;引入ingress组件。…

新火种AI|GPT-4诞生1年,OpenAI把它放到了机器人上

作者&#xff1a;一号 编辑&#xff1a;美美 ChatGPT拥有了身体&#xff0c;机器人也有了灵魂。 从OpenAI在去年3月14日拿出GPT-4后&#xff0c;已经过了整整一年。显然&#xff0c;在GPT-4诞生之后的这一年&#xff0c;一切都迭代得太快了&#xff0c;从GPT-4展现多模态能力&…

Nginx、LVS、HAProxy工作原理和负载均衡架构

当前大多数的互联网系统都使用了服务器集群技术&#xff0c;集群是将相同服务部署在多台服务器上构成一个集群整体对外提供服务&#xff0c;这些集群可以是 Web 应用服务器集群&#xff0c;也可以是数据库服务器集群&#xff0c;还可以是分布式缓存服务器集群等等。 在实际应用…

EMQX 4.0和EMQX 5.0集群架构实现1亿MQTT连接哪些改进

EMQX 5.0水平扩展能力得到了指数级提升&#xff0c;能够更可靠地承载更大规模的物联网设备连接量。 在EMQX5.0正式发布前的性能测试中&#xff0c;我们通过一个23节点的EMQX集群&#xff0c;全球首个达成了1亿MQTT连接每秒100万消息吞吐&#xff0c;这也使得EMQX 5.0成为目前为…

自然语言处理实验2 字符级RNN分类实验

实验2 字符级RNN分类实验 必做题&#xff1a; &#xff08;1&#xff09;数据准备&#xff1a;academy_titles.txt为“考硕考博”板块的帖子标题&#xff0c;job_titles.txt为“招聘信息”板块的帖子标题&#xff0c;将上述两个txt进行划分&#xff0c;其中训练集为70%&#xf…

【matlab】如何将.mat文件与.nii文件互转

【matlab】如何将.mat文件与.nii文件互转 .mat转为.nii文件 有时候代码需要读取的是.nii文件&#xff0c;但是如何现有的数据是.mat格式&#xff0c;需要将.mata转化为.nii文件 1、先加载.mat文件 % 加载.mat文件 load(your_mat_file.mat); % 请将your_mat_file.mat替换为实…

《家庭的觉醒》(二)提升觉悟的日常提示

尊重内心的本质 专注于你的孩子今天是谁&#xff0c;而不是今天他做了什么。 不要执着于他们的学业表现&#xff0c;测验成绩&#xff0c;成就或功课。 敞开心扉 发自内心与孩子分享你自己。还记得当孩子生病&#xff0c;在急诊室或医院的时候吗&#xff1f;还记得认识的另…

配置阿里云加速器

国内镜像中心常用阿里云或者网易云。在本地docker中指定要使用国内加速器的地址后&#xff0c;就可以直接从阿里云镜像中心下载镜像。 2024阿里云-上云采购季-阿里云 [rootlocalhost /]# mkdir -p /etc/docker [rootlocalhost /]# tee /etc/docker/daemon.json <<-EOF &…

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…

阿里云免费证书改为3个月,应对方法很简单

情商高点的说法是 Google 积极推进90天免费证书&#xff0c;各服务商积极响应。 情商低点的话&#xff0c;就是钱的问题。 现在基本各大服务商都在2024年停止签发1年期的免费SSL证书产品&#xff0c;有效期都缩短至3个月。 目前腾讯云倒还是一年期。 如果是一年期的话&#x…

冒泡排序,详详解解

目录 基本概念&#xff1a; 上图&#xff1a; 核心思路&#xff1a; 基本步骤&#xff1a; 关键&#xff1a; 代码核心&#xff1a; 补充&#xff1a; 代码&#xff08;规范&#xff09; &#xff1a; 代码&#xff08;优化&#xff09;&#xff1a; 今天我们不刷力扣了&…

CSDN 编辑器设置图片缩放和居中

CSDN 编辑器设置图片缩放和居中 文章目录 CSDN 编辑器设置图片缩放和居中对齐方式比例缩放 对齐方式 Markdown 编辑器插入图片的代码格式为 ![图片描述](图片路径)CSDN 的 Markdown 编辑器中插入图片&#xff0c;默认都是左对齐&#xff0c;需要设置居中对齐的话&#xff0c;…

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

0x01 产品简介 ChatGPT-Next-Web 是一种基于 OpenAI 的 GPT-3.5 、GPT-4.0语言模型的产品。它是设计用于 Web 环境中的聊天机器人,旨在为用户提供自然语言交互和智能对话的能力。 0x02 漏洞概述 2024年3月,互联网上披露CVE-2023-49785 ChatGPT-Next-Web SSRF/XSS 漏洞,未经…