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

在这里插入图片描述

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

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

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，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.rhkb.cn/news/277893.html

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

相关文章

基于Springboot+Vue+Sercurity实现的大学生健康管理平台

基于Springboot+Vue+Sercurity实现的大学生健康管理平台

1.项目介绍 大学生健康档案管理系统&#xff0c;通过电子健康档案管理系统这个平台&#xff0c;可以实现人员健康情况的信息化、网络化、系统化、规范化管理&#xff0c;从繁杂的数据查询和统计中解脱出来&#xff0c;更好的掌握人员健康状况。系统的主要功能包括&#xff1a;…
阅读更多...
2024年5家香港服务器推荐，性价比top5

2024年5家香港服务器推荐，性价比top5

​​香港服务器是中小企业建站、外贸建站、个人博客建站等领域非常受欢迎的服务器&#xff0c;2024年有哪些云厂商的香港服务器是比较有性价比的&#xff1f;这里根据小编在IT领域多年服务器使用经验&#xff0c;给大家罗列5家心目中最具性价比的香港服务器厂商。 这五家香港服…
阅读更多...
StarRocks面试题及答案整理，最新面试题

StarRocks面试题及答案整理，最新面试题

StarRocks 的 MV&#xff08;物化视图&#xff09;机制是如何工作的&#xff1f; StarRocks 的物化视图&#xff08;MV&#xff09;机制通过预先计算和存储数据的聚合结果或者转换结果来提高查询性能。其工作原理如下&#xff1a; 1、数据预处理&#xff1a; 在创建物化视图时…
阅读更多...
【静夜思】为什么我们会如此喜欢夜晚呢

【静夜思】为什么我们会如此喜欢夜晚呢

作为一名大学生&#xff0c;熬夜对我来说已是常态。每天都是近乎一点钟才有困意&#xff0c;觉得应该上床睡觉了&#xff0c;即使明天早八&#xff0c;即使明天有很多课。我也观察过身边的朋友&#xff0c;他们中大多数也和我一样&#xff0c;基本都是在12点过后才入睡。当今的…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——家乡广州介绍设计制作(5个页面)

HTML静态网页成品作业(HTML+CSS)——家乡广州介绍设计制作(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有5个页面。 二、作品演示 三、代…
阅读更多...
爱普生晶振发布RTC模块晶振（压电侠）

爱普生晶振发布RTC模块晶振（压电侠）

爱普生晶振一直以”省&#xff0c;小&#xff0c;精”技术作为资深核心&#xff0c;并且已经建立了一个原始的垂直整合制造模型&#xff0c;可以自己创建独特的核心技术和设备&#xff0c;使用这些作为基地的规划和设计提供独特价值的产品. 世界领先的石英晶体技术精工爱普生公…
阅读更多...
Jmeter+Ant 接口自动化环境配置指南

Jmeter+Ant 接口自动化环境配置指南

一 、Jmeter安装与配置 https://blog.csdn.net/tester_sc/article/details/80746405 注&#xff1a;Jmeter5.0的环境变量配置与4.0或历往老版本有部分小差异&#xff0c;笔者用的Jmeter 5.0 二 、Ant的安装与配置 # Ant下载地址(下载到指定目录后&#xff0c;进行解压到当前…
阅读更多...
在 Rust 中使用 Serde 处理json

在 Rust 中使用 Serde 处理json

在 Rust 中使用 Serde 处理json 在本文中&#xff0c;我们将讨论 Serde、如何在 Rust 应用程序中使用它以及一些更高级的提示和技巧。 什么是serde&#xff1f; Rust中的serde crate用于高效地序列化和反序列化多种格式的数据。它通过提供两个可以使用的traits来实现这一点&a…
阅读更多...
【CesiumJS-5】绘制动态路线实现飞行航线、汽车轨迹、路径漫游等

【CesiumJS-5】绘制动态路线实现飞行航线、汽车轨迹、路径漫游等

实现效果 前言 Cesium中&#xff0c;动态路线绘制的核心是借助CZML格式&#xff0c;CZML是一种用来描述动态场景的JSON数组,可以用来描述点、线、多边形、体、模型及其他图元,同时定义它们是怎样随时间变化的&#xff1b; CZML主要做三件事&#xff1a; 1.添加模型信息 2.添加…
阅读更多...
zookeeper快速入门一：zookeeper安装与启动

zookeeper快速入门一：zookeeper安装与启动

本文是zookeeper系列之快速入门中的第一篇&#xff0c;欢迎大家观看与指出不足。 写在前面&#xff1a; 不影响教程&#xff0c;笔者安装zookeeper用的是WSL(windows下的linux子系统&#xff09;&#xff0c;当然你想直接在windows上用zookeeper也是可以的。 如果你也想用ws…
阅读更多...
Linux学习（4）——使用编辑器

Linux学习（4）——使用编辑器

1.gedit编辑器 简单易懂&#xff0c;依赖图形界面。可以使用ctrlc ctrlv等快捷键&#xff0c;ctrls进行保存&#xff0c;与windows系统中相类似。 2.vi/vim编辑器 vi/vim可以直接通过控制台的终端完成文本的编辑&#xff0c;不依赖图形界面&#xff0c;使用范围更广。它的编辑…
阅读更多...
数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目（9）—SNN加速器的设计和实现(tiny_ODIN)

数字IC实践项目&#xff08;9&#xff09;—基于Verilog的SNN加速器 写在前面的话项目整体框图完整电路框图 项目简介和学习目的软件环境要求 Wave&CoverageTiming&#xff0c;Area & Power总结 写在前面的话 项目介绍&#xff1a; SNN硬件加速器是一种专为脉冲神经网…
阅读更多...
三、传输层拥塞控制、差错控制

三、传输层拥塞控制、差错控制

3.1 概述和传输层服务 传输服务和协议&#xff1a; 为运行在不同主机上的应用进程提供逻辑通信&#xff1b; 传输协议运行在端系统-发送方:将应用层的报文分成报文段&#xff0c;然后传递给网络层&#xff1b;接收方&#xff1a;将报文段重组成报文&#xff0c;然后传递给应用…
阅读更多...
泽众云真机-机型支持ADB调试功能即将上线

泽众云真机-机型支持ADB调试功能即将上线

最近云真机平台在线客服&#xff0c;收到很多咨询关于ADB调试功能&#xff0c;什么时候能更新&#xff1f;据小编所知&#xff0c;正在升级之中&#xff0c;有一块专门为了解决ADB调试功能提前准备&#xff0c;升级网络硬件设备&#xff0c;目前平台的功能已开发完成&#xff0…
阅读更多...
2024/3/15 记录简版抖音部署遇到的问题

2024/3/15 记录简版抖音部署遇到的问题

1、Centos连不上网 参考这一篇&#xff1a;虚拟机 CentOS 有线连接图标直接消失&#xff0c;网络连接不上&#xff0c;网络连接失败的解决方案&#xff08;亲测有效&#xff09;_centos网络图标不见了-CSDN博客 2、SQLyog连接不到docker中的mysql 原因是对密码有加密过程 &a…
阅读更多...
asp.net 作业星软件系统

asp.net 作业星软件系统

asp.net 作业星软件系统 用户功能:分教师和家长&#xff08;学生) 注册登录:登录部分是用户名密码&#xff0c;以及教师和家长&#xff08;学生&#xff09;的勾选; 注册包括用户名密码确认密码再次确认密码(与上方输入的密码比对&#xff09;身份班级设置找回账号的问题和答案…
阅读更多...
第三篇 - 概述- IAB受众和技术标准 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第三篇 - 概述- IAB受众和技术标准 - IAB视频广告标准《数字视频和有线电视广告格式指南》

第三篇 - 概述- IAB受众和技术标准​​​​​​​ - 我为什么要翻译介绍美国人工智能科技公司IAB技术标准系列&#xff08;2&#xff09; 本文目录 一、IAB技术实验室简介 二、概述及IAB受众 三、资源- IAB倡导的相关视频广告技术标准 四、案例分享-介绍一家数字化营销服务…
阅读更多...
如果网络不好 如何下载huggingface上的模型

如果网络不好 如何下载huggingface上的模型

很多朋友网络不太好&#xff0c;有时候上不了huggingface这样的国外网站&#xff1b; 或者网络流量不太够&#xff0c;想要下载一些stable diffusion模型&#xff0c;或者其他人工智能的大模型的时候&#xff0c;看到动辄几个G的模型文件&#xff0c;不太舍得下载&#xff1b;…
阅读更多...
【JavaSE】类与对象

【JavaSE】类与对象

前言 Java是一门纯面向对象的语言&#xff0c;在面向对象的世界里&#xff0c;一切都为对象。它是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。类与对象是我们学习面向对象最基础的知识&#xff0c;是面向对象实现的基石&#xff0c;可见它是有多么重…
阅读更多...
Linux环境开发工具之yum

Linux环境开发工具之yum

前言 前面我们已经对基本的指令和权限进行了介绍&#xff0c;本期开始我们将介绍常用的开发工具。例如&#xff1a;软件包管理器yum。 本期内容介绍 Linux上安装软件的方式 什么是yum yum的相关操作 yum的本地配置和yum源 一、Linux上安装软件的方式 在介绍Linux上如何安装一…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023