Vue.js前端开发零基础教学（三）

news2024/9/23 19:25:48

目录

2.6 计算属性

2.7侦听器 

2.8 样式绑定 

2.8.1    绑定class属性

2.8.2    绑定style属性 

2.9 阶段案例——学习计划表 

2.6 计算属性

概念：Vue提供了计算属性来描述依赖响应式数据的复杂逻辑。 计算属性可以实时监听数据的变化，返回一个计算后的新值，并将计算结果缓存起来。只有计算属性中依赖的数据源变化了，计算属性才会自动重新求值，并重新加入缓存。

在组件中使用计算属性，分为以下2个步骤。

1. 定义计算属性

概念：计算属性通过computed()函数定义，该函数的参数为一个回调函数，开发者需要在回调函数中实现计算功能，并在计算完成后返回计算后的数据，语法格式如下。

<script setup>
import { computed } from 'vue'
const 计算属性名 = computed(() => {
  return 计算后的数据
})
</script>

2. 输出计算属性

将计算属性定义好后，可以使用Mustache语法输出计算属性，语法格式如下。 

{{ 计算属性名 }}

演示计算属性的使用方法

步骤：

创建src\components\yy.vue文件写入代码：

<template>
  <p>初始message：{{ message }}</p>
  <p>反转之后的message：{{ reversedMessage }}</p>
  <button @click="updateMessage">更改</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello World')
const reversedMessage = computed(() =>
  message.value.split('').reverse().join('')
)
const updateMessage = () => {
  message.value = 'hello'
}
</script>

 修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果： 

2.7侦听器 

概念：在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动监听数据的状态。如果想在数据更新后进行相应的操作，可以通过侦听器来实现。

侦听器通过watch()函数定义，watch()函数的语法格式如下。

watch(侦听器的来源, 回调函数, 可选参数)

watch()函数有3个参数，下面对这3个参数分别进行讲解。 第1个参数是侦听器的来源，侦听器的来源可以有以下4种。

一个函数，返回一个值。

一个响应式数据。

一个响应式对象。

一个由以上类型的值组成的数组。 

第2个参数是数据发生变化时要调用的回调函数，这个回调函数的第1个参数表示新值，即数据发生变化后的值，第2个参数表示旧值，即数据发生变化前的值。

第3个参数是可选参数，它是一个对象，该对象有以下2个常用选项。 deep：默认情况下，当侦听一个对象时，如果对象中的属性值发生了变化，则无法被监听到。如果想监听到，可以将该选项设为true，表示进行深度监听。该选项的默认值为false，表示不使用该选项。

immediate：默认情况下，组件在初次加载完毕后不会调用侦听器的回调函数，如果想让侦听器的回调函数立即被调用，则需要将选项设为true。该选项的默认值为false，表示不使用该选项。

演示侦听器的使用方法

创建src\components\yy.vue文件。

<template>
  <input type="text" v-model="cityName">
</template>
<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
</script>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果：

2.8 样式绑定 

概念：在Vue中，通过更改元素的class属性可以更改元素的样式，而对class属性的操作可以通过v-bind来实现。 使用v-bind绑定class属性时，可以将class属性值绑定为字符串、对象或数组，下面分别进行讲解。

2.8.1    绑定class属性

1. 将class属性值绑定为字符串

在Vue中，可以将class属性值绑定为字符串，示例代码如下。

<template>
  <div v-bind:class="className"></div>
</template>
<script setup>
const className = 'box'
</script>

当上述代码运行后，div元素的渲染结果如下。

<div class="box"></div>

演示如何为class属性绑定字符串

 创建src\components\yy.vue文件输入代码:

<template>
  <div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box {
  border: 1px solid black;
}
</style>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果： 

 

2. 将class属性值绑定为对象

概念：在Vue中，可以将class属性值绑定为对象，从而动态地改变class属性值。对象中包含的属性名表示类名，属性值为布尔类型，如果属性值为true，表示类名生效，否则类名不生效。将class属性值绑定为对象的示例代码如下。

<template>
  <div v-bind:class="{ className: isActive }"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

运行上述代码后，div元素的渲染结果如下。

<div class="className"></div>

使用v-bind绑定的class属性可以与普通的class属性共存，示例代码如下。

<div class="className1" v-bind:class="{ className2: isActive }"></div>

 在上述代码中，当isActive为true时，div元素的渲染结果如下。

<div class="className1 className2"></div>

在使用v-bind绑定class属性时，如果不想将对象类型的class属性值直接写在模板中，可以将属性值定义成一个响应式对象或一个返回对象的计算属性，示例代码如下。

<template>
  <div v-bind:class="classObject1"></div>
  <div v-bind:class="classObject2"></div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
const classObject1 = reactive({ className: true })
const isActive = ref(true)
const classObject2 = computed(() => ({
  className: isActive.value
}))
</script>
<script setup>
import { ref, reactive, computed } from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner: true })
const classMeal = computed(() => ({
  meal: isMeal.value
}))
</script>

演示如何为class属性绑定对象

创建src\components\yy.vue文件输入代码：

<template>
  <div class="text" v-bind:class="{ box: isBox, border: isBorder }">
    <div v-bind:class="{ inner: isInner }">春夏</div>
    <div v-bind:class="classObject">秋冬</div>
    <div v-bind:class="classMeal">三餐四季~</div>
  </div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner: true })
const classMeal = computed(() => ({
  meal: isMeal.value
}))
</script>
<style>
.text {
  text-align: center;
  line-height: 30px;
}
.box {
  width: 100%;
  background: linear-gradient(white, rgb(239, 250, 86));
}
.border {  border: 2px dotted black; }
.inner {
  margin-top: 2px;
  width: 100px; height: 30px;
  border: 2px double black;
}
.meal {
  width: 100px; height: 30px;
  border: 2px dashed rgb(120, 81, 227);
}
</style>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果：

3. 将class属性值绑定为数组

概念：在Vue中，v-bind指令中的class属性值除了字符串和对象外，还可以是一个数组，用以动态地切换HTML的class属性，数组中的每个元素为要绑定的类名。 将class属性值绑定为数组的示例代码如下。 

<template>
  <div v-bind:class="[className1, className2]"></div>
</template>
<script setup>
import { ref } from 'vue'
const className1 = ref('active')
const className2 = ref('error')
</script>

运行上述代码后，div元素的渲染结果如下。

<div class="active error"></div>

 如果想有条件地切换列表中的class，可以使用三元表达式，示例代码如下。

<div v-bind:class="[isActive ? className1 : className2]"></div>

当class有多个条件时，在数组语法中也可以使用对象语法，示例代码如下。

<div v-bind:class="[{ active: isActive }, className2]"></div>

演示如何为class属性绑定数组

创建src\components\yy.vue文件。

<template>
  <div v-bind:class="[activeClass, borderClass]"></div>
  <div v-bind:class="[isActive ? activeClass : '', borderClass]"></div>
  <div v-bind:class="[{ active: isActive }, borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active {
  width: 100px;
  height: 10px;
  margin-bottom: 2px;
  background-color: rgb(59, 192, 241);
}
.border {
  border: 2px solid rgb(0, 0, 0);
}
</style>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果：

 

2.8.2    绑定style属性 

概念：在Vue中，通过更改元素的style属性也可以更改元素的样式，对style属性的操作也可以通过v-bind来实现。使用v-bind绑定style属性时，可以将style属性值绑定为对象或数组，下面分别进行讲解。

1. 将style属性值绑定为对象

在Vue中，将style属性值绑定为对象时，该对象中的属性名表示CSS属性名，属性值为CSS属性值。以对象语法绑定元素的style属性，示例代码如下。

<template>
  <div v-bind:style="{ color: 'red', 'font-size': '30px' }"></div>
  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  </div>
</template>
<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>

除了将对象直接定义在模板中，还可以将对象定义在<script>标签中，示例代码如下。

<template>
  <div v-bind:style="styleObject"></div>
</template>
<script setup>
import { reactive } from 'vue';
const styleObject = reactive({
  color: 'red',
  fontSize: '12px'
})
</script>

演示如何为style属性绑定对象

 创建src\components\yy.vue文件。

<template>
  <!-- 绑定样式属性值 -->
  <div v-bind:style="{ 'background-color': pink, width: width, height: height + 'px' }">
    <!-- 三元表达式 -->
    <div v-bind:style="{ backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px' }"></div>
    <!-- 绑定样式对象 -->
    <div v-bind:style="myDiv"></div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isBlue = ref(false)
const blue = ref('blue')
const pink = ref('pink')
const width = ref('100%')
const height = ref(40)
const myDiv = reactive({
  backgroundColor: 'red',  width: '50px',  height: '20px'
})
</script>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果：

 

2. 将style属性绑定为数组

将style属性绑定为数组，可以实现将多个样式应用到同一个元素上，示例代码如下。

<div v-bind:style="[classObj1, classObj2]"></div>

在上述代码中，数组中的每一个元素都是一个对象，例如classObj1和classObj2，对象中包含CSS属性名和属性值。每个对象需要在<script>标签中定义。

演示如何为class属性绑定数组

 创建src\components\yy.vue文件。

<template>
  <!-- 使用数组 -->
  <div v-bind:style="[activeClass, borderClass]"></div>
  <!-- 使用三元表达式 -->
  <div v-bind:style="[isActive ? activeClass : '', borderClass]"></div>
  <!-- 数组语法中使用对象语法 -->
  <div v-bind:style="[{ backgroundColor: 'rgb(59, 192, 241)', height: '10px' }, borderClass]"></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isActive = ref(true)
const activeClass = reactive({
  height: '10px',
  backgroundColor: 'rgb(59, 192, 241)'
 })
 const borderClass = reactive({
   border: '2px solid rgb(0, 0, 0)'
})
</script>

  修改src\main.js文件，切换页面中显示的组件。

import App from './components/yy.vue'

运行结果：

2.9 阶段案例——学习计划表 

概念：“学习计划表”用于对学习计划进行管理，包括对学习计划进行添加、删除、修改等操作。

1. 初始页面效果展示

当“学习计划表”案例打开后，页面中会展示学生的学习计划，包括学习科目、学习内容、学习地点、完成状态等。

1. 初始页面效果展示

页面上半部分为卡片区域，包含标题区域和表单区域。其中，标题区域中展示标题为“学习计划表”，表单区域中可以根据实际情况输入学习科目、学习内容、学习地点等内容，学习地点有3个选项，包括自习室、图书馆、宿舍，单击“添加”按钮即可添加学习计划，默认添加完成状态为“未完成”。 页面下半部分为表格区域，用于展示学习计划列表。在表单区域中添加并提交的信息会在表格区域中展示。学生可以在表格区域更改学习计划的完成状态为“已完成”或者“未完成”。

2. 添加学习计划页面效果展示

在表单区域中输入学习计划，学习科目为“JavaScript”，学习内容为“运算符”，学习地点为“图书馆”，单击“添加”按钮之后的页面效果如下图所示。

 

3. 修改学习计划完成状态的页面效果展示

将学习计划2的完成状态更改为“已完成”的页面效果如下图所示。

 4. 删除学习计划

当学习计划处于“已完成”状态时，学生可以对学习计划进行删除操作，否则不能进行删除操作。

vue.js第二章到此落幕，欢迎预览~

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Premiere模板|200个视频标题文字动画pr字幕模板包

Premiere模板|200个视频标题文字动画pr字幕模板包

Premiere模板&#xff0c;13个类别200个Pr视频标题字幕文字动画模板mogrt包。 几乎适用于任何场景。粗体标题&#xff0c;标注&#xff0c;未来主义和线条标题&#xff0c;下三分之一&#xff0c;霓虹灯&#xff0c;带数字的标题&#xff0c;倒计时&#xff0c;表格&#xff0c…
阅读更多...
智慧商显安卓主板MT8788_联发科MTK平台多媒体广告一体机方案

智慧商显安卓主板MT8788_联发科MTK平台多媒体广告一体机方案

MT8788高性能智能主板&#xff0c;支持Android 9.0操作系统&#xff0c;支持双屏异显功能;MT8788是基于12nm工艺制程四核A73四核A53架构的八核心CPU,主频高达2.0GHz,拥有超强的通用计算性能。 MT8788主板采用10层二阶超高密度PCB板,集成了4G、百兆以太网、2.4G/5G 双频WiFi、蓝…
阅读更多...
C# xaml框架以及Java的ORM介绍

C# xaml框架以及Java的ORM介绍

c#有ASP.Net,.NET以及EF Core这几个重要的运行时和框架.分别用于web,应用以及数据库的ORM. 目前跨平台的有Avalonia UI,.Net MAUI以及Uno Platform,至于WPF等本身不是跨平台的,但可以依靠其他库实现跨平台.这里面Avalonia应该是认为bug比较少的. 当然目前最火的跨平台解决方案…
阅读更多...
Python使用指定端口进行http请求的例子

Python使用指定端口进行http请求的例子

使用requests库 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class SourcePortAdapter(HTTPAdapter): """"Transport adapter" that allows us to set the source port.""" def __init__(self, port, *args, **kwargs): self.poolm…
阅读更多...
Spring Cloud Alibaba微服务从入门到进阶（七）（服务容错-Sentinel）

Spring Cloud Alibaba微服务从入门到进阶（七）（服务容错-Sentinel）

雪崩效应 我们把基础服务故障&#xff0c;导致上层服务故障&#xff0c;并且这个故障不断放大的过程&#xff0c;成为雪崩效应。 雪崩效应&#xff0c;往往是因为服务没有做好容错造成的。 微服务常见容错方案 仓壁模式 比如让controller有自己独立的线程池&#xff0c;线程池满…
阅读更多...
数据结构的概念大合集06（树和二叉树）

数据结构的概念大合集06（树和二叉树）

概念大合集06 1、树1.1 树的相关定义1.2 树的基本运算1.3 树的基本术语1.3.1 结点的度&#xff0c;树的度1.3.2 分支结点&#xff0c;叶子节点1.3.3 路径&#xff0c;路径长度1.3.4 孩子结点&#xff0c;双亲结点&#xff0c;兄弟结点1.3.5 结点层次&#xff0c;树的高度1.3.6 …
阅读更多...
24.两数相加

24.两数相加

给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数都不会以 0 …
阅读更多...
DELL交换机清空配置S4128T

DELL交换机清空配置S4128T

备份配置 show run | no-more show inventory | no-more show environment | no-more show system brief | no-more -------------- 清除数据 delete startup-config system "sudo -i" //输入密码 rm -rf /config/etc/opt/dell/os10/db_init/startup.xml rm…
阅读更多...
基于SpringBoot和Vue的大学生租房系统的设计与实现

基于SpringBoot和Vue的大学生租房系统的设计与实现

今天要和大家聊的是一款今天要和大家聊的是一款基于SpringBoot和Vue的大学生租房系统的设计与实现。 &#xff01;&#xff01;&#xff01; 有需要的小伙伴可以通过文章末尾名片咨询我哦&#xff01;&#xff01;&#xff01; &#x1f495;&#x1f495;作者&#xff1a;李同…
阅读更多...
【Java11下载、安装、部署指南】

【Java11下载、安装、部署指南】

oracle jdk11下载 oracle jdk所有版本归档【archive】下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/archive/ oracle jdk11下载地址&#xff1a; https://www.oracle.com/java/technologies/javase/jdk11-archive-downloads.html 配置或修改wi…
阅读更多...
【Python + Django】启动简单的文本页面

【Python + Django】启动简单的文本页面

前言&#xff1a; 为了应付&#xff08;bushi&#xff09;毕业论文&#xff0c;总要自己亲手搞一个像模像样的项目出来吧 ~ ~ 希望自己能在新的连载中学到项目搭建的知识&#xff0c;这也算是为自己的测试经历增添光彩吧&#xff01;&#xff01;&#xff01; 希望、希望大家…
阅读更多...
MySQL 字段定义时的属性设置

MySQL 字段定义时的属性设置

开发的时候第一步就是建表&#xff0c;在创建表的时候&#xff0c;我们需要定义表的字段&#xff0c;每个字段都有一些属性&#xff0c;比如说是否为空&#xff0c;是否允许有默认值&#xff0c;是不是逐渐等。 这些约束字段的属性&#xff0c;可以让字段的值更符合我们的预期&…
阅读更多...
③【Docker】Docker部署Nginx

③【Docker】Docker部署Nginx

个人简介&#xff1a;Java领域新星创作者&#xff1b;阿里云技术博主、星级博主、专家博主&#xff1b;正在Java学习的路上摸爬滚打&#xff0c;记录学习的过程~ 个人主页&#xff1a;.29.的博客 学习社区&#xff1a;进去逛一逛~ ③【Docker】Docker部署Nginx docker拉取nginx…
阅读更多...
【计算机网络篇】物理层（3）编码与调制

【计算机网络篇】物理层（3）编码与调制

文章目录 &#x1f354;编码与调试⭐基本概念 &#x1f354;基本的带通调制方法和混合调制方法⭐基本的带通调制方法⭐混合调制方法 &#x1f354;编码与调试 物理层是OSI模型中的第一层&#xff0c;它负责在物理媒体上传输原始比特流。在物理层的编码和调试中&#xff0c;我们…
阅读更多...
基于springboot的学生心理健康评估系统

基于springboot的学生心理健康评估系统

技术&#xff1a;springbootvuemysql 一、系统背景 这次开发的学生心理咨询评估系统有管理员和用户。管理员可以管理个人中心&#xff0c;用户管理&#xff0c;试题管理&#xff0c;试卷管理&#xff0c;考试管理等。用户参加考试。经过前面自己查阅的网络知识&#xff0c;加上…
阅读更多...
数据挖掘之关联规则

数据挖掘之关联规则

“啤酒和尿布的荣誉” 概念 项 item&#xff1a;单个的事物个体 &#xff0c;I{i1,i2…im}是所有项的集合&#xff0c;|I|m是项的总数项集&#xff08;item set)/模式&#xff08;pattern)&#xff1a;项的集合&#xff0c;包含k个项的项集称为k-项集数据集(data set)/数据库…
阅读更多...
2024年最新分享提升Macbook运行速度的十大小技巧

2024年最新分享提升Macbook运行速度的十大小技巧

经常听到小伙伴在抱怨PC电脑很慢&#xff0c;但是其实Mac电脑随着用的时间增长&#xff0c;运行速度也会越来越慢&#xff0c;那么造成Mac运行慢的原因有很多&#xff0c;可能是操作系统过时未更新&#xff0c;也可能是内存&#xff08;RAM&#xff09;不足&#xff0c;以下小编…
阅读更多...
计算机二级C语言的注意事项及相应真题-6-程序设计

计算机二级C语言的注意事项及相应真题-6-程序设计

目录 51.将a所指数组主对角线上的元素分别乘以2;次对角线上的元素分别乘以3&#xff0c;依次放入指针p所指的数组中。计算过程中不得修改a所指数组中的数据52.将a、b中的两个两位正整数合并形成一个新的整数放在c中。合并的方式是:将a中的十位和个位数依次放在变量c的十位和千位…
阅读更多...
【OJ比赛日历】快周末了，不来一场比赛吗？ #03.23-03.29 #16场

【OJ比赛日历】快周末了，不来一场比赛吗？ #03.23-03.29 #16场

CompHub[1] 实时聚合多平台的数据类(Kaggle、天池…)和OJ类(Leetcode、牛客…&#xff09;比赛。本账号会推送最新的比赛消息&#xff0c;欢迎关注&#xff01; 以下信息仅供参考&#xff0c;以比赛官网为准 目录 2024-03-23&#xff08;周六&#xff09; #7场比赛2024-03-24…
阅读更多...
SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测

SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测 目录 SCI一区 | Matlab实现SSA-TCN-BiGRU-Attention麻雀算法优化时间卷积双向门控循环单元融合注意力机制多变量时间序列预测预测效果基本介绍模型描述程序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023