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

目录

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.mfbz.cn/a/485958.html

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

相关文章

爬虫Day3

爬虫Day3

用到的网页--豆瓣电影Top250 需要爬取信息&#xff1a; 数据保存在网页源代码中&#xff0c;是服务加载方式。先拿到网页源代码--request。再通过re提取想要的信息---re。 新知识&#xff1a;用csv存数据&#xff0c;可以用excel表格展示数据 import csv result obj.findite…
阅读更多...
AI大模型引领未来智慧科研暨ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的应用

AI大模型引领未来智慧科研暨ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…
阅读更多...
浅谈WPF之MVVM工具包

浅谈WPF之MVVM工具包

在之前的WPF示例中&#xff0c;都会用到一个MVVM框&#xff0c;也是一个比较常的MVVM框架&#xff0c;就是MVVM工具包【CommunityToolkit.Mvvm】&#xff0c;今天专门以一个简单的小例子&#xff0c;简述一下MVVM工具包的常见用法&#xff0c;仅供学习分享使用&#xff0c;如有…
阅读更多...
Docker 安装 Nginx 容器，反向代理

Docker 安装 Nginx 容器，反向代理

Docker官方镜像https://hub.docker.com/ 寻找Nginx镜像 下载Nginx镜像 docker pull nginx #下载最新版Nginx镜像 (其实此命令就等同于 : docker pull nginx:latest ) docker pull nginx:xxx #下载指定版本的Nginx镜像 (xxx指具体版本号)检查当前所有Docker下载的镜像 docker…
阅读更多...
Spring Security之认证过滤器

Spring Security之认证过滤器

前言 上回我们探讨了关于Spring Security&#xff0c;着实复杂。这次咱们聊的认证过滤器就先聊聊认证功能。涉及到多方协同的功能&#xff0c;咱分开聊。也给小伙伴喘口气&#xff0c;嘻嘻。此外也是因为只有登录认证了&#xff0c;才有后续的更多功能集成的可能。 认证过滤器…
阅读更多...
unity学习（69）——多人位置同步

unity学习（69）——多人位置同步

简单的很&#xff0c;每个客户端向服务器发送位置信息&#xff0c;服务器再把这些位置信息发送给其他客户端。 1.客户端发送。 1.1在SocketModel脚本中添加一个新的类MoveDTO public class MoveDTO {public string Id{get; set;}public int Dir{get;set;}public Assets.Mode…
阅读更多...
Leetcode第13题:罗马数转为十进制数

Leetcode第13题:罗马数转为十进制数

利用等价换算法将罗马数转为十进制数 class Solution:def romanToInt(self, s: str) -> int:roman_map{I:1,V:5,X:10,L:50,C:100,D:500,M:1000}before_val,countroman_map[s[0]],0for c in s:valroman_map[c]if val<before_val:countvalelse:countcount-val2*(val-befor…
阅读更多...
echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同

echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同

如何让其中一个柱子的颜色跟其他柱子不同 series: [{data: [120,// 使用对象的形式&#xff0c; value代表当前值, itemStyle设置样式{value: 200,itemStyle: {color: #a90000}},150,80,70,110,130],type: bar}]设置单个柱子颜色&#xff1a; 柱形图单个柱子颜色: https://e…
阅读更多...
c 语言 三元搜索 - 迭代与递归（Ternary Search）

c 语言 三元搜索 - 迭代与递归（Ternary Search）

计算机系统使用不同的方法来查找特定数据。有多种搜索算法&#xff0c;每种算法更适合特定情况。例如&#xff0c;二分搜索将信息分为两部分&#xff0c;而三元搜索则执行相同的操作&#xff0c;但分为三个相等的部分。值得注意的是&#xff0c;三元搜索仅对排序数据有效。在本…
阅读更多...
video.js自定义预览组件-旋转、下载、画中画、放大缩小功能

video.js自定义预览组件-旋转、下载、画中画、放大缩小功能

使用video.js实现视频播放功能 效果图 - 这里以弹窗展示为例 注意&#xff1a;记得安装video.js插件&#xff01;&#xff01;&#xff01; 代码 父级使用&#xff1a; videoPreview.vue文件 <!-- 视频预览组件 --> <template><el-dialogid"previewFi…
阅读更多...
【战略前沿】丹麦正在建造一台英伟达人工智能超级计算机

【战略前沿】丹麦正在建造一台英伟达人工智能超级计算机

【原文】Denmark is building an Nvidia AI supercomputer 【作者】Linnea Ahlgren 它将于今年上线&#xff0c;并以新的量子计算软件为特色。 过去一年最大的赢家——芯片制造商英伟达&#xff08;Nvidia&#xff09;和制药制造商诺和诺德&#xff08;Novo Nordisk&#xff0…
阅读更多...
【C语言】linux内核pci_alloc_irq_vectors

【C语言】linux内核pci_alloc_irq_vectors

一、注释 代码中包含了几个关于PCI&#xff08;外围组件互联&#xff09;设备中断请求&#xff08;IRQ&#xff09;向量分配的函数&#xff0c;以及内联函数声明&#xff0c;下面是对这些函数的中文注释&#xff1a; static inline int pci_alloc_irq_vectors_affinity(struc…
阅读更多...
曲线生成 | 图解Reeds-Shepp曲线生成原理(附ROS C++/Python/Matlab仿真)

曲线生成 | 图解Reeds-Shepp曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是Reeds-Shepp曲线&#xff1f;2 Reeds-Shepp曲线的运动模式3 Reeds-Shepp曲线算法原理3.1 坐标变换3.2 时间翻转(time-flip)3.3 反射变换(reflect)3.4 后向变换(backwards) 4 仿真实现4.1 ROS C实现4.2 Python实现4.3 Matlab实现 0 专栏介绍 &#x1f5…
阅读更多...
【竞技宝】DOTA2：lou神带队速推 AR力克Zero晋级决赛

【竞技宝】DOTA2：lou神带队速推 AR力克Zero晋级决赛

北京时间2024年3月24日,DOTA2梦幻联赛S23中国区预选赛正在进行之中,昨日进行了本次预选赛的胜者组决赛Zero对阵AR。本场比赛双方前两局战至1-1平,决胜局AR选出一套前期进攻性十足的阵容早早取得优势,最终AR鏖战三局力克Zero晋级决赛。以下是本场比赛的详细战报。 第一局: Zero…
阅读更多...
第九篇【传奇开心果系列】Python自动化办公库技术点案例示例：深度解读Python处理PDF文件

第九篇【传奇开心果系列】Python自动化办公库技术点案例示例：深度解读Python处理PDF文件

传奇开心果博文系列 系列博文目录Python自动化办公库技术点案例示例系列 博文目录前言一、重要作用介绍二、Python库处理PDF文件基础操作和高级操作介绍&#xff08;一&#xff09;基础操作介绍&#xff08;二&#xff09;高级操作介绍 三、Python库处理PDF文件基础操作示例代码…
阅读更多...
ESP8266制作WIFI音箱

ESP8266制作WIFI音箱

首先是设备截图 使用的技术： 1、Esp8266播放网络音乐 2、自己搭建一个音乐播放服务，这样播放的内容就由自己而定了，将你的服务对接支付宝，就可以实现支付宝收款语音播报了 代码 esp8266代码 #include <Arduino.h>#ifdef ESP32#include <WiFi.h> #else#inc…
阅读更多...
（AtCoder Beginner Contest 325） ---- D - Printing Machine -- 题解

（AtCoder Beginner Contest 325） ---- D - Printing Machine -- 题解

目录 D - Printing Machine&#xff1a; 题目大意&#xff1a; 思路解析&#xff1a; 代码实现&#xff1a; D - Printing Machine&#xff1a; 题目大意&#xff1a; 思路解析&#xff1a; 打印一次后&#xff0c;需要充电一微秒后才能再次打印就可以看作每微妙只能打印一…
阅读更多...
2024年3月GESP认证Python编程一级真题试卷

2024年3月GESP认证Python编程一级真题试卷

2024年3月GESP认证Python编程一级真题试卷 题目总数&#xff1a;27 总分数&#xff1a;100 选择题 第 1 题 单选题 小杨的父母最近刚刚给他买了一块华为手表&#xff0c;他说手表上跑的是鸿蒙&#xff0c;这个鸿蒙是&#xff1f;&#xff08; &#xff09;。 A.小程…
阅读更多...
03. 【Android教程】Genymotion 的安装与使用

03. 【Android教程】Genymotion 的安装与使用

在上一章中我们在 Eclipse 当中创建了 AVD&#xff0c;由于性能差只适合测试小型 App。这里将推荐一款性能更佳的 Android 模拟器—— Genymotion。首先我们看看 Genymotion 好在哪里。 1. Genymotion 优势 Genymotion 相对于内置模拟器有如下优势&#xff1a; 运行速度快、画…
阅读更多...
[数据结构]二叉树的建立与遍历(递归)

[数据结构]二叉树的建立与遍历(递归)

一、二叉树的遍历与建立 首先我们拥有如下二叉树: 要了解二叉树遍历,我们得先了解二叉树的三种遍历方式:前序遍历,中序遍历,后序遍历 1.前序遍历 前序遍历:根,左子树,右子树 遍历的结果就是:1 2 4 8 N N 9 N N 5 10 N N 11 N N 3 6 N N 7 N N 2.中序遍历 中序遍历:左子树…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站