首页 > 其他分享 >Vue3常用指令

Vue3常用指令

时间:2024-01-05 22:34:37浏览次数:31  
标签:常用 vue obj title 插值 num reactive 指令 Vue3

本小节中,我们将学习 Vue 3 中的文本插值相关功能。

文本插值语法

文本插值语法如下,通常用双大括号来表示,当其绑定的变量发生变化时,插值的内容也会随之发生变化,也就是数据双向绑定功能:

{{ 插值表达式 }}

示例:

<script setup>
import { ref } from 'vue';

// 响应式字符串变量
const title = ref('Hello, vue 3')
</script>

<template>
  <!-- 文本插值 -->
  <h1>{{ title }}</h1>
</template>

插值表达式

插值表达式支持四则运算、比较运算符、数值操作、三目运算符、数组操作、对象操作等。以下是相关示例:

<template>
  <!-- 字符串 -->
  <div>{{ obj.title }}</div>
  <div>{{ obj.num + "2222" }}</div>
  <div>{{ obj.title.length }}</div>

  <!-- 数值 -->
  <div>{{ obj.num }}</div>
  <div>{{ obj.num + obj.num2 }}</div>
  <div>{{ obj.num > obj.num2 }}</div>
  <div>{{ obj.num.toFixed(2) }}</div>
  
  <!-- 布尔类型 -->
  <div>{{ obj.isSuccess }}</div>

  <!-- 数组 -->
  <div>{{ obj.arr }}</div>
  
  <!-- 对象 -->
  <div>{{ obj.subObj }}</div>
  <div>{{ obj.subObj.domain }}</div>
  
  <!-- 三目运算符 -->
  <div>{{ obj.isSuccess ? 'true' : 'false' }}</div>
</template>

<script setup>
import { reactive } from 'vue';

// reactive 函数用于响应式对象
const obj = reactive({
  title: 'Hello',
  num: 1,
  num2: 2,
  isSuccess: true,
  arr: [1, 2, 3, 4],
  subObj: {
    title: '犬小哈',
    domain: 'www.quanxiaoha.com'
  }
})
</script>

页面输出结果如下:

插值表达式输出结果

v-text 文本插值指令

除了使用 {{ }} 双大括号的形式外,还可以使用 v-text 指令来实现文本插值,示例代码如下:

<template>

  <!-- 纯文本 -->
  <div>{{ obj.title }}</div>
  <!-- 纯文本 -->
  <div v-text="obj.title"></div>

</template>

<script setup>
import { reactive } from 'vue';

// reactive 函数用于响应式对象
const obj = reactive({
  title: '11111'
})

</script>

页面输出结果如下:

 

v-once 指令 :只会被执行一次

v-once 指令用于执行一次性的插值,当后续绑定的变量再次发生变化时,插值处的内容不会发生任何变化, 也就是说它只会被渲染一次。示例如下:

<template>
  <!-- 随着 title 值变化而变化 -->
  <div>{{ obj.title }}</div>
  <!-- 仅会被渲染一次,不会随之变化 -->
  <div v-once>{{ obj.title }}</div>

  <!-- 输入框用于动态修改 title 变量的值 -->
  <input v-model="obj.title">
</template>

<script setup>
import { reactive } from 'vue';

const obj = reactive({
  title: '123'
})
</script>

input 标签中的 v-model 指令用于将输入框内的值与 title 绑定在一起,当我们修改输入框内的值的时候,title 的值也会随之变化。实际演示效果图如下:

标签:常用,vue,obj,title,插值,num,reactive,指令,Vue3
From: https://www.cnblogs.com/Fe3O4/p/17948227

相关文章

  • springmvc的五个常用注解?
    1、@Controller在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Model 返回给对应的View 进行展示。在SpringMVC 中提供了一个非常简便的定义Controller 的方法,你无需继承特......
  • Vue3 深入解析:原理与核心功能概览
    引言Vue.js,作为当今最流行的前端框架之一,以其声明式编程、响应式设计和组件化开发等特性深受开发者喜爱。Vue3(也称Vue.jsNext)作为Vue.js的重大更新版本,不仅在性能上有显著提升,还在架构设计上进行了深度优化。本文将深入探讨Vue3的核心原理及其改进之处。一、CompositionAPIVu......
  • elastic常用api
    elasticsearch运维常用API查看集群状态查询集群状态命令:curl-XGET"http://ip:port/_cluster/health?pretty"#?prettyjson打印结果查询集群JVM状态curl-XGET"http://ip:port/_nodes/stats/jvm?pretty"#查看具体某一个curl-XGET"http://ip:port/_nodes/nodeNa......
  • VUE3新建项目
     npminitvite-apparcher240105 //进入目录cd项目目录//安装依赖npminstall//运行npmrundev    ......
  • AI小蜜批量写作助手:多级指令,插件,GPTs满足不同写作需求
    为什么会开发这个脚本?爆文项目的核心是矩阵怼量具体怎么做这里介绍很清楚了:AI爆文撸流量主保姆级教程3.0+脚本写作教程(解放双手)我在刚做爆文项目时候,都是手动操作,复制指令,组合指令,粘贴,AI生成内容,然后发布。整个过程流程简单,全部重复劳动。但凡没点耐心,很容易就放弃了。重复......
  • # Vue3 使用路由 Router
    Vue3使用路由Router之前几篇博文说了一下vue的基本语法和vue的传参,今天这篇博文稍微说一下vue3里面使用路由。介绍众所周知,vue是用来构建单页面应用的前端框架,大于大多数此类型应用来讲,都推荐使用官方支持的vueRouter,在单页面应用,客户端的JavaScript可以连接页面......
  • Maven基础入门​及与IDEA的集成(下)常用命令、生命周期及与IDEA集成
    Maven基础入门Maven常用命令compile:编译在项目的根目录打开cmd窗口,运行mvncompile命令,Maven即开始进行自动编译项目。Maven会自动开始下载依赖项,然后进行源码的编译,并将生成的编译文件存入target文件中。clean:清理mvnclean命令会清除compile时生成的target文件夹。test:测试自......
  • 常用的 Linux 系统备份、恢复命令
    tar命令使用tar命令备份副本(本机备份整个系统,以后还原还是还原到本机)注意根目录下要有充足的可用空间用于备份。cd/#tar.gz格式tarcvpzfsystem_backup.tar.gz/--exclude=/proc--exclude=/lost+found--exclude=/system_backup.tar.gz--exclude=/mnt--exclude=/sys#tar......
  • 有哪些常用的 Python 模块需要进行安装
    Python是一种高级编程语言,它提供了许多标准库和第三方库,可以帮助我们更快、更高效地编写程序。在Python中,模块是一组相关的函数、类和变量的集合,可以通过导入模块来使用其中的功能。本文将介绍一些常用的Python模块,需要进行安装才能使用。一、NumPyNumPy是一个用于科学计算的Python......
  • Vue3 自定义Hooks大全:一站式解决你的疑惑!
    前言不知道喜欢vue3的小伙伴和我是不是一样,刚上手vue3的时候对自定义hooks一脸懵逼,在一些视频网站学习的时候老师讲解到自定义hooks最喜欢用加减乘除来描述自定义hooks是咋用的,可能是我理解能力比较差吧,我看了这个加减乘除的自定义hooks之后感觉跟没看一样,还是一脸懵逼,......