Vue3基础笔记(3)高级绑定

一.Class绑定

        数据绑定的一个常见需求场景师操纵元素的CSS class列表,因为class是attribute,我们可以和其他attribute一样使用v-bind将他们和动态的字符串绑定,但是在处理较为复杂的绑定时,拼接字符串容易出现错误。因此Vue专门为class的v-bind用法进行了增强:可以绑定对象或者数组~

 

<p :class="{ziti:zitiTest,yanse:yanseTest}">属性绑定</p>
 zitiTest:false,
 yanseTest:true
.ziti{
  font-size: 36px;

.yanse{
  color: blue;
}}

如下图,由于zitiTest的值为false而yanseTest的值为true,所以仅显示颜色的样式~

还有一种数组的写法:

<p :class="['yanse','ziti']">另一个属性绑定</p>

 

二.Style绑定

同理,没什么难度:

<p :style="{color:'red',fontSize:'30px'}">又来一个</p>

三.侦听器

即watch,每次响应式属性发生变化时触发一个函数~

所谓响应式属性,即return中的元素:

export default{
      data(){
        return{
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true
        }}}
 <p @click="changeT">{{ textY }}</p>
        return{
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true,
          textY:'原来的值~'
        }
      watch:{
        textY(newValue,oldValue){
          console.log(newValue+" "+oldValue);
          //可以轻松拿到变化前后的值
        }
      }

需要注意的是,watch和method、data同级~

四.表单输入绑定

 v-model的存在大大减少了绑定数据的工作量~

  <form>
    <input type="text" v-model="myname">
    <p>{{ myname }}</p>
  </form>
        return{
          maname:'',
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true,
          textY:'原来的值~'
        }

 

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

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

相关文章

ZJJ-2A直流绝缘监视继电器额定电流3.1mA额定电压110VDCJOSEF约瑟

系列型号 JJJ-1绝缘监视继电器&#xff1b; ZJJ-1/A绝缘监视继电器&#xff1b; ZJJ-1A绝缘监视继电器&#xff1b; ZJJ-2型直流绝缘监视继电器 ZJJ-2直流绝缘监视继电器&#xff1b; ZJJ-2B直流绝缘监视继电器&#xff1b; ZJJ-2AC直流绝缘监视继电器&#xff1b; 用途…

【基础物理实验】【AFM虚拟实验】基于AFM的物质表面微观结构及力学性质表征仿真实验(上)【北京航空航天大学】

基于AFM的物质表面微观结构及力学性质表征仿真实验 说明&#xff1a; 本次实验为本科生《基础物理实验》课程中的虚拟实验部分&#xff0c;在虚拟实验平台中进行。 一、实验目的&#xff1a; 1. 掌握AFM的基本成像原理及系统结构&#xff1b; 2. 掌握AFM的基本操作技巧及操…

什么是云安全

云安全和网络安全有所不同&#xff0c;因为云安全一词 比网络安全更涵盖整个企业基础设施。一般来说&#xff0c;当人们提到云安全时&#xff0c;指的是第三方服务提供商提供的 IaaS 云环境。在这种情况下&#xff0c;云安全不仅包括网络安全工具&#xff0c;还包括服务器、容器…

数据结构7:栈

文章目录 头文件Stack.h 实现文件 测试文件test.c 经典题目 头文件 Stack.h #pragma once #include<stdio.h> #include<stdlib.h> #include<string.h> #include<assert.h>#define CAPACITY_INIT 4typedef int STDataType;typedef struct Stack {STDa…

云端运维:我的成长轨迹与荣耀印记

云端运维&#xff1a;我的成长轨迹与荣耀印记 关于博主 ​ 我是一名运维领域的博客平台博主&#xff0c;也是一名对技术充满热情的探索者。在运维这条道路上&#xff0c;我不断积累知识、提升技能&#xff0c;力求将最新的技术理念和实践经验分享给更多志同道合的朋友。我热衷…

Python代码打包成exe程序

国内镜像源 清华大学 https://pypi.tuna.tsinghua.edu.cn/simple阿里云 https://mirrors.aliyun.com/pypi/simple/豆瓣 https://pypi.douban.com/simple/ 百度云 https://mirror.baidu.com/pypi/simple/中科大 https://pypi.mirrors.ustc.edu.cn/simple/华为云 https://mirror…

Jmeter参数化的 4 种方式用法总结

参数化就是用变量代替数据的过程&#xff0c;总结参数化的4种方式&#xff1a; 1、用户自定义变量 用户自定义变更有两种方法&#xff1a; &#xff08;1&#xff09;在测试计划面板中的用户定义的变量设置 说明&#xff1a;在此用户定义的变量对所有测试计划都会生效 &…

家居网购项目(权限验证+事务管理)

文章目录 1.过滤器权限认证1.程序框架图2.web.xml3.编写AdminAuthorization4.编写MemberAuthorization5.细节6.结果展示1.未登录可以任意浏览商品2.点击添加购物车提示登录3.点击后台管理&#xff0c;提示管理员登录4.也做了其余资源的访问验证 2.事务管理1.思路分析2.重写JDBC…

Python数据容器(一)

一.数据容器入门 1.Python中的数据容器&#xff1a;一种可以容纳多份数据的数据类型&#xff0c;容纳的每一份数据称之为1个元素&#xff0c;每一个元素&#xff0c;可以是任意类型的数据&#xff0c;如字符串、数字、布尔等。 2.数据容器根据特点的不同&#xff0c;如&#…

2A大电流线性稳压器具备两种输出电压范围

概述 PCD3931 是一款低噪声、低压差线性稳压器 (LDO)&#xff0c;可提供 2A 输出电流&#xff0c;最大压降仅为 160mV。该器件提供两种输出电压范围。 PCD3931 的输出电压可通过外部电阻分压器在 0.5V 至 5.5V 范围内进行调节。PCD3931 集低噪声、高 PSRR 和高输出电流能力等特…

24年重庆三支一扶报名照不通过怎么处理?

24年重庆三支一扶报名照不通过怎么处理&#xff1f;

消化内科专科护士理论考试案例选择题及答案

电大搜题 多的用不完的题库&#xff0c;支持文字、图片搜题&#xff0c;包含国家开放大学、广东开放大学、超星等等多个平台题库&#xff0c;考试作业必备神器。 公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#…

鸿蒙 UI预览报错

SyntaxError: Unexpected end of JSON input 删除entry下的.preview文件 重新刷新预览

python爬虫------- Selenium下篇(二十三天)

&#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; &#x1f388;&#x1f388;所属专栏&#xff1a;python爬虫学习&#x1f388;&#x1f388; ✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天…

MySQL表空间管理与优化(8/16)

表空间管理和优化 innodb_file_per_table参数&#xff08;此参数在分区表章节中还会出现&#xff09;&#xff1a; 这个参数决定了InnoDB表数据的存储方式。当参数设置为ON时&#xff0c;每个InnoDB表的数据会单独存储在一个以.ibd为后缀的文件中&#xff0c;这有利于管理和回收…

4、XTuner 微调个人小助手(笔记)

视频地址&#xff1a; https://b23.tv/QUhT6ni 课程文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/readme.md 作业文档&#xff1a;https://github.com/InternLM/Tutorial/blob/camp2/xtuner/homework.md 1、Finetune 简介 两种Finetune范式 …

JavaEE企业开发新技术5

目录 2.18 综合应用-1 2.19 综合应用-2 2.20 综合应用-3 2.21 综合应用-4 2.22 综合应用-5 Synchronized &#xff1a; 2.18 综合应用-1 反射的高级应用 DAO开发中&#xff0c;实体类对应DAO的实现类中有很多方法的代码具有高度相似性&#xff0c;为了提供代码的复用性,降低…

【STL】迭代器iterator详解

前言 本篇文章以对string的操作来演示迭代器的操作。 一、什么是迭代器iterator&#xff1f; 迭代器&#xff08;iterator&#xff09;是一种可以遍历容器元素的数据类型。迭代器是一个变量&#xff0c;相当于容器和操纵容器的算法之间的中介。C迭代器是一种用于遍历容器中元的…

【Modelsim】保持波形格式重编译and波形的保存与查看

文章目录 保持原波形格式重编译波形的保持与查看保存波形打开工程查看波形 保持原波形格式重编译 Modelsim 仿真设置好波形格式后&#xff0c;若需要修改代码并保持原波形格式重新查看波形&#xff0c;只需将文件重新编译后仿真即可。 1.修改代码后Project页面的代码状态变成…

lua学习笔记20(lua中一些自带库的学习)

print("*****************************lua中一些自带库的学习*******************************") print("*************时间***************") --系统时间 print(os.time()) --自己传入参数得到时间 print(os.time({year2011,month4,day5})) --os.data(&qu…