Vue中的常用指令!!

article/2024/5/21 17:10:50

Vue 中的指令是 Vue 的核心功能之一,用于在模板中添加特殊的标签,使得 DOM 元素和 Vue 实例的数据绑定在一起,实现双向数据绑定和动态更新。下面是常用的 Vue 指令。

v-if 指令:根据条件动态渲染元素

<!-- 根据 show 布尔值的值动态渲染元素 -->
<div v-if="show">Hello, Vue!</div>

v-for 指令:循环渲染元素列表

<!-- 使用 v-for 指令循环渲染元素列表 -->
<ul><li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
</ul>

v-bind 指令:动态绑定属性或 prop

<!-- 使用 v-bind 指令动态绑定 title 属性的值 -->
<img src="image.jpg" v-bind:title="imageTitle"><!-- 简化版语法 -->
<img :src="imageSrc" :title="imageTitle">

当我们需要将 Vue 实例中的数据动态地绑定到 HTML 元素上时,需要使用 v-bind 指令。它可以用于动态地设置元素的属性、样式等,下面是几个使用 v-bind 的示例:

  1. 动态设置元素的 class
<!-- 根据 isRed 的值动态设置元素的 class -->
<div v-bind:class="{ 'red': isRed }">Hello, Vue!</div>

2.动态生成元素的 style 属性

<!-- 根据 color 和 fontSize 的值动态生成元素的 style 属性 -->
<div v-bind:style="{ color: color, 'font-size': fontSize + 'px' }">Hello, Vue!</div>

3.动态绑定元素的 href 属性

<!-- 根据 url 的值动态绑定元素的 href 属性 -->
<a v-bind:href="url">Go to {{ url }}</a>

4.动态绑定元素的 target 属性

<!-- 根据 isBlank 的值动态绑定元素的 target 属性 -->
<a v-bind:href="url" v-bind:target="isBlank ? '_blank' : '_self'">Go to {{ url }}</a>

在代码中,使用 v-bind: 或简写的 : 来表示需要绑定的属性,后面跟着需要绑定的表达式。对于对象语法的绑定方式(如第一个示例),可以使用对象属性的名称来表示属性名,属性值为表达式的结果,表示该属性是否存在。对于绑定到 style 属性的样式表达式,需要使用对象语法或数组语法来表示多个样式。

v-on 指令:绑定事件监听器

<!-- 使用 v-on 指令绑定 click 事件的回调函数 -->
<button v-on:click="handleClick">Click Me</button><!-- 简化版语法 -->
<button @click="handleClick">Click Me</button>

v-model 指令:双向数据绑定

<!-- 使用 v-model 指令实现表单的双向绑定 -->
<input type="text" v-model="message">

​​​​​​​v-show 指令:根据条件切换元素的显示或隐藏状态

<!-- 根据 show 布尔值的值切换元素的显示或隐藏状态 -->
<div v-show="show">Hello, Vue!</div>

参考文献:

  • Vue 官方文档:Vue.js - 渐进式 JavaScript 框架 | Vue.js


http://www.ngui.cc/article/show-1007696.html

相关文章

【算法基础】欧拉函数

一、欧拉函数 1. 公式法求欧拉函数 2. 筛法求欧拉函数 二、案例分析1 (公式法求欧拉函数) (一)Question 1. 问题描述 2. Input 第一行包含整数 n。接下来 n行,每行包含一个正整数 ai。(1 ≤ n ≤ 100, 1 ≤ ai ≤ 2109) 3. Output 输出共 n 行,每行输出一个正整数…

Python接口自动化 ❀ JsonPath提取器和正则提取器

Python接口自动化 ❀ JsonPath提取器和正则提取器一、前言1.1 正则提取器1.2 正则示例&#xff1a;1.3 JsonPath提取器1.4 JsonPath提取器具体使用一、前言 我们一般在做接口关联时&#xff0c;会通过保存中间变量实现接口关联&#xff0c;在关联时就需要用到变量提取&#xf…

计科数据《算法设计与分析》第3次上机作业

问题 A: 算法10-6~10-8&#xff1a;快速排序 #include<bits/stdc.h> using namespace std; #define int long long #define fer(i,a,b) for(int ia;i<b;i) const int N1e55,mod1e97; int a[N]; int partition(int a[],int l,int r){int il,jr;int xa[l];while(i<j…

Oracle-CDC进程同步报错问题合集

前言: Oracle CDC是数据库自带的数据库数据复制和增量数据抽取工具&#xff0c;提供五种复制模式 1 Synchronous Change Data Capture Configuration(同步复制) 2 Asynchronous HotLog Configuration(异步在线日志CDC) 3 Asynchronous Distributed HotLog Configuratio…

史诗级详解面试中JVM的实战

史诗级详解面试中JVM的实战 1.1 什么是内存泄漏?什么是内存溢出?1.2 你们线上环境的JVM都设置多大?1.3 线上Java服务器内存飙升怎么回事?1.4 线上Java项目CPU飙到100%怎么排查?1.5 线上Java项目OOM了,怎么回事?1.1 什么是内存泄漏?什么是内存溢出? 内存溢出:OutOfMe…

Lua for 的使用

Lua 中的 for 循环有两种形式&#xff1a;数值型遍历和泛型遍历。 1&#xff0c;数值型遍历 语法为: for nameexp1, exp2 [,exp] do -- do something end [,exp] 这个不是必须的&#xff0c;是可选项。它表示步长&#xff0c;即从nameexp1 如何变化到 exp2&#xff0c;所…

HJ64 MP3光标位置(java详解)

就是一块诺基亚手机屏幕,只能显示四个歌曲,upper代表屏幕显示第一个歌曲(总歌曲中第几个),down代表屏幕显示的最后一个歌曲(总歌曲中第几个) 你要输入这个总歌曲数量n {初始值,cur0,upper0,downMath.min(3,n-1);}{为啥cur为0,例如打开QQ音乐光标不都是显示在第一个歌曲位置嘛} …

C++初阶——类和对象(3)赋值/运算符重载

目录 5.赋值运算符重载 5.1 运算符重载 5.2 赋值运算符重载 5.3 前置和后置重载 6.日期类的实现——流插入&#xff0c;流提取重载 Date.h&#xff1a; Date.cpp: 7.const成员 8.取地址及const取地址操作符重载 5.赋值运算符重载 5.1 运算符重载 C为了增强代码的可读性…

建堆、堆排序、TopK问题大合集

一、如何建堆 1、向上调整建堆法O(NlogN) 原理&#xff1a; 利用向上调整的方法进行建堆&#xff0c;是通过模仿之前堆的插入操作&#xff0c;从第二个数开始&#xff0c;每次插入一个数&#xff0c;就对这个数进行向上调整&#xff0c;这样子既保证了原有数据为堆&#xff…

测试开发进阶系列课程

测试开发系列课程1.完善程序思维--------案列&#xff1a;图书管理系统的创建**&#xff08;一&#xff09;图书管理系统的创建**1.完善程序思维--------案列&#xff1a;图书管理系统的创建 &#xff08;一&#xff09;图书管理系统的创建 1.在main中写入主函数&#xff0c;…