vue的常用指令


1.使用双花括号( {{}} )对变量输出,内部可以写简单的表达式用于对数据的处理

 

 2..v-text:相当于js的innerText,

 3.v-html:相当于js的innerHTML

 4.v-bind:动态绑定属性,简写是冒号( : )

 

 5.绑定class:操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们

6.v-on:绑定事件,简写是@

 7.v-model:可以用 v-model 指令在表单 <input><textarea>  <select> 元素上创建双向数据绑定

8.v-if  v-else-if v-else:

v-if:条件性地渲染一块内容这块内容只会在指令的表达式返回 truthy[1] 值的时候被渲染。

v-elsev-else-if:是跟js中的if一样,v-if的else块和else-if块

9.v-show:根据条件展示元素, 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

v-if vs v-show的区别:v-if是通过动态向dom里面插入或者是删除一个节点,来实现元素的显示隐藏的;二v-show:是通过css样式的display:none;来实现的。

10.v-pre:原样输出,不解析模板标签{{}}.

11.v-cloak:当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题.
 

[v-cloak]{display:none;}

 12.v-once:只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。

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

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

相关文章

【开源】基于Vue和SpringBoot的固始鹅块销售系统

项目编号&#xff1a; S 060 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S060&#xff0c;文末获取源码。} 项目编号&#xff1a;S060&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…

C语言每日一题(31)相交链表

力扣160.相交链表 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意…

【unity2021.3.6f】运行官方 Vuforia Hololens 2 Sample 教程

文章目录 前言一、创建unity项目二、导入unity1.添加到我的资源2.在package Manage 里面去找到&#xff0c;点击下载&#xff0c;下载完成后点击Import 如下图&#xff1a;3.导入途中会有窗口弹出 很多提示&#xff0c;都点击默认选项&#xff1a;Import 、Install/Upgrade 等 …

认识“协议”

文章目录&#xff1a; 什么是协议结构化的数据传输序列化和反序列化网络版本计算器 什么是协议 在计算机网络中&#xff0c;协议是指在网络中进行通信和数据交换时&#xff0c;双方遵循的规则和约定集合。它定义了数据的传输格式、顺序、错误处理、认证和安全性等方面的规范。 …

2018年五一杯数学建模C题江苏省本科教育质量综合评价解题全过程文档及程序

2019年五一杯数学建模 C题 江苏省本科教育质量综合评价 原题再现 随着中国的改革开放&#xff0c;国家的综合实力不断增强&#xff0c;中国高等教育发展整体已进入世界中上水平。作为一个教育大省&#xff0c;江苏省的本科教育发展在全国名列前茅&#xff0c;而江苏省13个地级…

openldap-sasl身份认证镜像

背景 在这篇文章中&#xff0c;AD域信息同步至openLDAP我们使用了SASL将身份验证从OpenLDAP委托给AD”这种方案&#xff0c;本文主要来构建此方案的docker镜像。 sasl官网&#xff1a;Cyrus SASL bitnami/openldap镜像地址&#xff1a;containers/Dockerfile bitnami/openl…

修改服务器端Apache默认根目录

目标&#xff1a;修改默认Apache网站根目录 /var/www/html 一、找到 DocumentRoot “/var/www/html” 这一段 apache的根目录&#xff0c;把/var/www/html 这个目录改 #DocumentRoot "/var/www/html" DocumentRoot "/home/cloud/tuya_mini_h5/build" 二、…

图论| 827. 最大人工岛 127. 单词接龙

827. 最大人工岛 题目&#xff1a;给你一个大小为 n x n 二进制矩阵 grid 。最多 只能将一格 0 变成 1 。返回执行此操作后&#xff0c;grid 中最大的岛屿面积是多少&#xff1f; 岛屿 由一组上、下、左、右四个方向相连的 1 形成。 题目链接&#xff1a;[827. 最大人工岛](ht…

obsidian和bookmaster

1 手动安装插件 插件地址&#xff1a;https://forum-zh.obsidian.md/t/topic/12333 安装file服务器 地址&#xff1a;http://www.rejetto.com/hfs/ hfs.exe可以改个端口 改成8866&#xff0c;ip地址也可以改成 127.0.0.1 # 因为安装到本地 如果要创建账户的话&#xff0c;就…

wpf devexpress在未束缚模式中生成Tree

TreeListControl 可以在未束缚模式中没有数据源时操作&#xff0c;这个教程示范如何在没有数据源时创建tree 在XAML生成tree 创建ProjectObject类实现数据对象显示在TreeListControl: public class ProjectObject {public string Name { get; set; }public string Executor {…

Kubernetes基础知识了解

一、Kubernetes简介 Kubernetes是一个轻便的和可扩展的开源平台&#xff0c;用于管理容器化应用和服务。通过Kubernetes能够进行应用的自动化部署和扩缩容。在Kubernetes中&#xff0c;会将组成应用的容器组合成一个逻辑单元以更易管理和发现。Kubernetes积累了作为Google生产…

微服务架构之路7,Nacos配置中心的Pull原理,附源码

目录 一、本地配置二、配置中心1、以Nacos为例&#xff1a;2、Pull模式3、也可以通过Nacos实现注册中心 三、配置中心提供了哪些功能四、如何操作配置中心1、配置注册2、配置反注册3、配置查看4、配置变更订阅 五、主流的微服务注册中心有哪些&#xff0c;如何选择&#xff1f;…