Chapter 02 Vue指令（上）

2024-08-23 16:20
文章标签 javascript 02 vue 指令 frontend chapter

本文主要是介绍Chapter 02 Vue指令（上），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

文章目录

  • 前言
  • 一、v-text指令
  • 二、v-html指令
  • 三、v-show指令
  • 四、v-if指令
  • 五、v-else指令
  • 六、v-else-if指令

前言

在 Vue.js 中，指令是带有 v- 前缀的特殊属性，不同属性对应不同的功能。通过学习不同的指令，我们能够灵活应对多种业务场景的需求。本章详细讲解了一些基本的 Vue 指令，包括 v-text、v-html、v-show、v-if、v-else 以及 v-else-if 指令。

本篇文章参考黑马程序员

一、v-text指令

①作用：更新元素的文本内容

②语法：v-text="文本内容"

③注意事项：v-text 直接操作元素的 textContent 属性，会将元素内的所有文本内容替换为绑定的值，而不保留原来已经存在的文本内容或其他子元素。使用差值表达式{{}}可以替换指定内容。

【示例】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-text指令</title>
</head>
<!--  v-text指令的作用：更新元素的文本内容 -->
<body><div id="app"><!-- v-text指令会替换<h2>元素原本的文本内容 --><!-- 内部支持写表达式 使用+符号来进行字符串的拼接操作--><h2 v-text="message+'!'">深圳</h2><h2 v-text="info+'!'">深圳</h2><!--  默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容 --><h2>{{ message +'!'}}深圳</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"Hello",info:"World"}})</script>
</body></html>

运行结果：
在这里插入图片描述

二、v-html指令

①作用：更新元素的 innerHTML，可插入 HTML 内容

②语法：v-html = " 表达式 "

【示例】
插值表达式并不具备解析标签的能力
差值表达式{{}}会将数据解释为纯文本，而不是 HTML。
在这里插入图片描述
若想插入 HTML，需要使用 v-html 指令。
在这里插入图片描述
点击“Vue 官网”即可跳转至 Vue 的官方网站
在这里插入图片描述

解析文本使用v-text
解析html结构使用v-html

三、v-show指令

①作用：基于表达式值的真假性来改变元素的可见性

②语法：v-show = "表达式"
（表达式值为true则显示，值为false则隐藏）

③原理：切换元素的 display 属性控制显示隐藏

④场景：频繁切换显示隐藏的场景

【示例】
表达式值为true时，元素正常显示。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-show指令</title><style>.box {width: 200px;height: 100px;line-height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}</style>
</head>
<body><div id="app"><div v-show=flag class="box">我是v-show控制的盒子</div> </div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: true}})</script></body>
</html>

运行结果：
在这里插入图片描述
表达式值为false时，元素的 display 属性会被设置为 none，从而使该元素隐藏。

<script>const app = new Vue({el: '#app',data: {flag: true}})
</script>

运行结果：
在这里插入图片描述

四、v-if指令

①作用：基于表达式值的真假性，来条件性地渲染元素或者模板片段。

②语法： v-if = "表达式"
（表达式值为true则显示，值为false则隐藏）

③原理：基于条件判断创建或移除元素节点

④场景：要么显示，要么隐藏，不频繁切换的场景

【示例】
表达式值为true时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-if指令</title><style>.box {width: 200px;height: 100px;line-height: 100px;margin: 10px;border: 3px solid #000;text-align: center;border-radius: 5px;box-shadow: 2px 2px 2px #ccc;}</style>
</head>
<body><div id="app"><div v-if=flag class="box">我是v-if控制的盒子</div></div><script src="./vue.js"></script><script>const app = new Vue({el: '#app',data: {flag: true}})</script></body>
</html>

运行结果：
在这里插入图片描述

表达式值为false时：

<script>const app = new Vue({el: '#app',data: {flag: true}})
</script>

运行结果：
在这里插入图片描述
v-show与v-if的主要区别：

  • v-show仅仅切换 display 属性，所以切换速度快，但在 DOM 中总是存在该元素，只是改变了样式。使用简单、开销小，适合频繁切换显示的场景。
  • v-if则是根据条件动态地添加或移除 DOM 元素。在条件为 false 时，元素会被完全移除，适合不经常切换显示的情况，但切换相对较慢，因为每次都要进行 DOM 操作。

五、v-else指令

①作用：辅助 v-if 进行判断渲染

②语法： v-else"

③注意事项： 需紧挨着 v-if 一起使用

【示例】

  <div id="app"><p v-if="gender==1">性别：男</p><p v-else>性别：女</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender:1}})</script></body>

运行结果：
在这里插入图片描述
将<p v-if="gender==1">性别：男</p>注释掉后：

<div id="app"><!-- <p v-if="gender==1">性别：男</p> --><p v-else>性别：女</p></div>

运行结果：
在这里插入图片描述
每个 v-else 都应该紧跟着一个对应的 v-if 或 v-else-if，否则就会报错，提示 v-else 没有对应的 v-if。

六、v-else-if指令

①作用：辅助 v-if 进行判断渲染

②语法： v-else-if = "表达式"

【示例】

<body><div id="app"><p v-if="gender==1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score>=90">成绩评定A：奖励电脑一台</p><p v-else-if="score>=90">成绩评定B：奖励周末郊游</p><p v-else-if="score>=90">成绩评定C：奖励零食礼包</p><p v-else="score>=90">成绩评定D：惩罚一周不能玩手机</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {gender:1,score:88}})</script></body>

在这里插入图片描述

这篇关于Chapter 02 Vue指令（上）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1099886。

相关文章

vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...
python解析HTML并提取span标签中的文本

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript
阅读更多...
Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2