Vue常用指令+用法举例 详解

vue的常用指令有:vue常用指令有:v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。

1.v-on
v-on 事件绑定指令,用来辅助程序员为DOM 元素绑定事件监听

语法: v-on:<事件类型>="<函数名>"由于v-on 指令在开发中使用频率非常高,因此,vue 官方为其提供了简写形式(简写为英文的@) 

<body><div id="app"><!-- 完整写法 v-on: --><div v-on:click="clickfunc">点击事件</div><!-- 缩写 @ --><div @click="clickfunc">点击事件</div></div>
</body>
<script>new Vue({el:"#app",data:{},methods:{// 定义一个 点击函数   clickfunc:function(){console.dir('click event')}    },})
</script>

2.v-model
vue中双向绑定是一个指令v-model,可以绑定一个动态值到视图,同时视图中变化能改变该值。v-model是语法糖,默认情况下相于:value和@input。

   使用v-model可以减少大量繁琐的事件处理代码,提高开发效率,代码可读性也更好

   通常在表单项上使用v-model

   原生的表单项可以直接使用v-model,自定义组件上如果要使用它需要在组件内绑定value并处理输入事件。语法: v-model="<变量名>"

<body><div id="app"><div>val的值:{{val}}</div><div>val的值:{{val}}</div><input v-model="val"></div>
</body>
<script>new Vue({el:"#app",data:{val:'success'}})
</script>

3.v-once

v-once只会执行一次渲染,当数据发生改变时,不会再变化

<div id="app"><p v-once>{{msg}}</p><input v-model="msg" type="text" />
</div>
<script>let vue = new Vue({el:"#app",data:{msg:'今天气温'}})
</script>

4.v-show

v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性

<div id="app"><div v-show="conditional ==  'ok' ">{{msg}}</div><input v-model="msg" type="text" />
</div>
<script>let vue = new Vue({el:"#app",data:{msg:'今天气温',conditional:'ok'}})
</script>

5.v-if、v-else、v-else-if
v-if  指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

v-if和v-show有同样的效果,不同在于v-if是重新渲染,而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

说明一下:v-if可以单独使用,v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别

v-if、v-else-if都是接受一个条件或布尔值,v-else不需要参数。比较简单,看看案例:
<div id="app"><div>小明评级为:<span v-if="score >= 90">优秀</span><span v-else-if="score >= 80">良好</span><span v-else-if="score >= 60">及格</span><span v-else>不及格</span></div>
</div>
<script>new Vue({el:"#app",data:{msg:'message',score:59,  },})
</script>

6.v-for

v-for可用来遍历数组、对象、字符串。

<div id="app"><!-- obj --><div v-for="(att,val) in obj">{{att}}:{{val}}</div><!-- arr --><div v-for="(val, index) in arr">{{index}}:{{val}}</div><!-- string --><div v-for="astr in str">{{astr}}</div>
</div>
<script>new Vue({el:"#app",data:{obj:{name:'kk',age:'18',hobby:'pingpong'},arr:[1,2,3,4,4,5,6,7],str:'str hello world'},})
</script>

7.v-text和v-html

v-text是渲染字符串,会覆盖原先的字符串

v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子

<div id="app"><div>{{innerHtml}}</div><div v-text="innerHtml"></div><div v-html="innerHtml"></div>
</div>
<script>new Vue({el:"#app",data:{innerHtml:'<button>一个按钮</button>'}})
</script>

8.v-bind

可以将标签内的属性值解析成js代码,在标签的属性中使用v-bind,双引号里的内容会被当作js解析(只能解析变量或三元表达式),如下:
如果给属性值设置为一个变量,那么可以使用v-bind
可以缩写为:<属性>="<变量>"

 <div id="app"><!-- 完整写法 v-bind: --><div v-bind:class="className">"{{innerHtml}}"</div><!-- 缩写 : --><div :class="className">"{{innerHtml}}"</div><div v-text="innerHtml"></div><div v-html="innerHtml"></div>
</div>
<script>new Vue({el:"#app",data:{innerHtml:'<button>一个按钮</button>',className:'box'}})
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构好文集合

1.哈希表 https://blog.csdn.net/weixin_46195957/article/details/125298629 2.红黑树 https://www.cnblogs.com/crazymakercircle/p/16320430.html#autoid-h2-5-2-0

2189. 有源汇上下界最大流(最大流上,下界可行流,模板题)

活动 - AcWing 给定一个包含 n 个点 m 条边的有向图&#xff0c;每条边都有一个流量下界和流量上界。 给定源点 S 和汇点 T&#xff0c;求源点到汇点的最大流。 输入格式 第一行包含四个整数 n,m,S,T。 接下来 m 行&#xff0c;每行包含四个整数 a,b,c,d 表示点 a 和 b 之…

单片机03--按键--寄存器版

GPIO端口相关寄存器&#xff08;STM32F40x芯片&#xff09; 目标&#xff1a; 开关KEY1控制开灯。 分析&#xff1a; KEY1---PA0--->输入---->浮空输入/下拉输入 KEY1不导通时&#xff0c;PA0输入为低电平&#xff0c;KEY1导通时&#xff0c;PA0输入为高电平。 实现…

【Unity】双击txt文件以记事本形式(文本文档)打开

在Unity工程任意Editor文件夹下创建C#脚本&#xff1a;CustomAssetHandler using UnityEngine; using UnityEditor; using UnityEditor.Callbacks;public class CustomAssetHandler {[OnOpenAssetAttribute(1)]public static bool step1(int instanceID, int line){string pat…

Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中&#xff0c;Runtime-Only 和 Runtime Compiler 是两种不同的构建方式。 Runtime-Only&#xff08;仅运行时&#xff09;&#xff1a;在 Runtime-Only 构建中&#xff0c;Vue 库只包含运行时的代码&#xff0c;不包含模板编译器。。Runtime Compiler&#xff08…

SpringBoot异步任务获取HttpServletRequest

前言 在使用框架日常开发中需要在controller中进行一些异步操作减少请求时间&#xff0c;但是发现在使用Anysc注解后会出现Request对象无法获取的情况&#xff0c;本文就此情况给出完整的解决方案 原因分析 Anysc注解会开启一个新的线程&#xff0c;主线程的Request和子线程…

SpringBoot的约定优于配置,你的理解是什么?

我从4个点方面来回答。 首先&#xff0c;约定优于配置是一种软件设计的范式&#xff0c;它的核心思想是减少软件开发人员对于配置项的维护&#xff0c;从而让开发人员更加聚焦在业务逻辑上。 SpringBoot就是约定优于配置这一理念下的产物&#xff0c;它类似于Spring框架下的一…

Vue3-组合式Api(重点)

阅读文章你可以收获的知识 1.知道setup语法糖的使用和如何实现的 2.知道在vue3中如何定义响应式数据 3.知道在vue3中如何定义一个计算属性&#xff08;computed&#xff09; 4.知道如何在vue3中使用watch来监听数据 5.知道在vue3如何实现父子通信 6.知道vue3如何使用ref函…

BIM工程师认证相关信息

目录 背景 一、中国图学学会颁发的全国BIM技能等级考试证书 二、中国建设教育协会颁发的BIM证书 背景 BIM工程师证书是建筑信息模型证书&#xff0c;英文全称是Building Information Modeling。对于建筑工程从业人员来说&#xff0c;BIM证书可以证明个人的工作能力&#xf…

软件测试工程师linux学习之系统层面相关命令总结

1 linux系统重启和关机的命令 重启命令&#xff1a;reboot 关机命令&#xff1a;shutdown 这两个命令一般很少用到&#xff0c;我们了解即可。 2 查看日志信息命令 什么是日志&#xff0c;日志就是一个一个普通的文本文件&#xff0c;文件里面记录的是软件运行过程中的信息…

一、初始 Vue

1、Vue 1.1 Vue简介 1.1.1 Vue.js 是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第…

Stable Diffusion 绘画入门教程(webui)-ControlNet

ControlNet可以说在SD里有着举足轻重的地位&#xff0c;如果没有ControlNet&#xff0c;sd的可玩性和实用性将大大降低。 前面几篇文章介绍了 提示词 和 lora&#xff0c;本篇文章介绍sd里最关键的第三个要素–ControlNet 文章目录 一、它具体能干啥1、艺术字2、改变姿态3、其…

Spring解决循环依赖

目录 什么是spring循环依赖 什么情况下循环依赖可以被处理&#xff1f; spring 如何解决循环依赖 创建A这个Bean的流程 答疑 疑问&#xff1a;在给B注入的时候为什么要注入一个代理对象&#xff1f; 初始化的时候是对A对象本身进行初始化&#xff0c;而容器中以及注入到B…

AI新工具(20240221) OOTDiffusion-虚拟试穿技术的实现;Groq-世界上最快的大模型,每秒可以输出近500个token

OOTDiffusion - 虚拟试穿技术的实现 OOTDiffusion是一种基于潜在扩散的虚拟试穿技术&#xff0c;其主要目的是通过实现控制性的换装融合&#xff0c;让用户能够在虚拟环境中试穿不同的服装。该技术通过融合最新的机器学习算法与图像处理技术&#xff0c;为用户提供了一种新颖的…

vue小记——this(1)

原生和Vue中使用this的这几个坑你都知道吗&#xff1f; - 掘金 (juejin.cn) 在JavaScript中&#xff0c;this是一个特殊的关键字&#xff0c;它在函数被调用时自动定义。this的值在函数被调用时决定&#xff0c;取决于调用的上下文&#xff08;context&#xff09;&#xff0c…

盘点 Udemy 上最受欢迎的免费编程课程

之前给大家推荐过一些油管上的免费学习资源&#xff0c;如果您还没有看过的话可以点击这里前往。 今天再给大家推荐一批Udemy上超高质量并且免费的编程课程&#xff0c;有需要的小伙伴可以学起来了。 1. JavaScript Essentials 第一门免费课程是&#xff1a;JavaScript Essen…

h5网页和 Android APP联调,webview嵌入网页,网页中window.open打开新页面,网页只在webview中打开,没有重开一个app窗口

我是h5网页开发&#xff0c;客户app通过webview嵌入我的页面 点击标题window.open跳转到长图页面&#xff0c;客户的需求是在app里新开一个窗口展示长图页面&#xff0c;window.open打开&#xff0c;ios端是符合客户需求的&#xff0c;但是在安卓端他会在当前webview打开 这…

IDEA实现ssh远程连接本地Linux服务器

文章目录 1. 检查Linux SSH服务2. 本地连接测试3. Linux 安装Cpolar4. 创建远程连接公网地址5. 公网远程连接测试6. 固定连接公网地址7. 固定地址连接测试 本文主要介绍如何在IDEA中设置远程连接服务器开发环境&#xff0c;并结合Cpolar内网穿透工具实现无公网远程连接&#xf…

Unity3d Shader篇(七)— 纹理采样

文章目录 前言一、什么是纹理采样&#xff1f;1. 纹理采样的工作原理2. 纹理采样的优缺点优点缺点 二、使用步骤1. Shader 属性定义2. SubShader 设置3. 渲染 Pass4. 定义结构体和顶点着色器函数5. 片元着色器函数 三、效果四、总结使用场景 前言 纹理采样是一种常用的图形学技…

打造智能物品租赁平台:Java与SpringBoot的实践

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…