二、插值操作

最新推荐文章于 2022-09-15 13:02:49 发布
最新推荐文章于 2022-09-15 13:02:49 发布
阅读量295 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lin_Willen/article/details/112130575
版权

01-Mustache语法

1.1代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-Mustache语法</title>
</head>
<body>

<div id="app">
  <!--  mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
  <h2>{{message}}</h2>
  <h2>{{message}}</br>Long time no see!</h2>
  <h2>{{firstName+lastName}}</h2>
  <h2>{{firstName+"_"+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      firstName: 'lin',
      lastName: 'willen',
      counter: 100
    }
  })
</script>
</body>
</html>

1.2运行结果

在这里插入图片描述

02-v-once指令的使用

2.1v-once

  • 该指令后面不需要跟任何表达式
  • 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变

2.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-once指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-once>{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })
</script>
</body>
</html>

2.3运行结果

在这里插入图片描述

2.4Console修改message值

在这里插入图片描述

03-v-html指令的使用

3.1v-html

1、 某些情况下，我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{{}}来输出，会将HTML代码也一起输出
  • 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容

2、 如果我们希望解析出HTML展示，可以使用v-html指令

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行

3.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-html指令的使用</title>
</head>
<body>

<div id="app">
  <!--  可查看运行效果，区别两种效果，很显然第二种是我们真正需要的-->
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      //服务器返回url时，可能不止返回url，可能会把整个a标签返回，如下
      url:'<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>
</body>
</html>

3.3运行结果

在这里插入图片描述

04-v-text指令的使用

4.1v-text

  • v-text作用和Mustache比较相似：都是用于数据显示在界面中
  • v-text通常情况下，接受一个string类型，原先在标签内的值会被覆盖
  • v-text不够灵活，一般开发中，就是用Mustache语法插值

4.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-text指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}} world!</h2>
  <h2 v-text="message"> world!</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    }
  })
</script>
</body>
</html>

4.3运行结果

在这里插入图片描述

05-v-pre指令的使用

5.1v-pre

  • v-pre用于跳过这个元素和它子元素的编译过程，用于显示原来的Mustache语法

5.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-v-pre指令的使用</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })
</script>
</body>
</html>

5.3运行结果

在这里插入图片描述

06-v-cloak指令的使用

6.1v-cloak

  • cloak：斗篷
  • 某些情况下，浏览器可能会直接显示出未编译的Mustache标签

6.2代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-v-cloak指令的使用</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  setTimeout(function () {
    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello world!'
      }
    })
  },1000)

</script>
</body>
</html>

6.3运行结果

如果没有加v-cloak以及style内容，那么此时显示{{message}}，用户体验极差
在这里插入图片描述
加了v-cloak以及style内容后会先显示空白，等待1秒后Vue实例创建出来后把文本显示出来
在这里插入图片描述

不会Java怎么找女朋友
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
插值操作
KEY_cheung的博客
08-15 278
1.mustache语法，不仅可以直接写变量，还可以写简单的表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>template</title> </head> <body> <div id = "app"> <h2>{{message}}</h2> ...
Vue——第一个Vue程序——2020.11.12
weixin_43402353的博客
11-12 514
一丶直接上源码，解释在注释，不懂评论留言，必回 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div> <script src="../js/vue.js">
Vue之插值操作
qq_44756582的博客
06-03 1852
插值操作 个人博客 https://www.boycharse.top Vue系列 01-Vue的初体验 Vue的插值操作 什么是插值操作 我们紧接上一篇的例子： 在网页的显示中，vue中的message插入到了{{message}}中，这就是我们所说的插值操作。 Mustache插值 这种插值操作我们已经见过了，几乎是最常用的一种，也就是用{{}}来进行插值。 {{}}中是一个变量时 {{}}中的可以是一个变量，如： {{message}}中的message是data中的message变量。 {{}}
二维插值2_二维插值计算_二维插值的计算_二维插值_数据插值_
09-28
在具体操作中，首先需要加载或生成数据点，然后选择合适的插值方法，调用MATLAB内置的插值函数如`griddata`或自定义的插值算法，计算出新的插值点。最后，使用MATLAB的图形库（如`surf`或`mesh`）绘制插值曲面，以...
二维Akima插值Matlab程序
12-27
测试脚本（示例）通常会提供一些数据点，执行插值操作，并将结果与预期值进行比较，以验证函数的正确性。这些脚本也能够帮助用户理解如何使用这两个自定义插值函数，并且可以通过修改脚本中的参数来探索不同插值场景...
基于FPGA实现的双线性插值（二次线性插值）算法的实现工程文件
02-27
开发者会用Verilog编写双线性插值的算法，定义数据路径、控制逻辑以及接口，确保FPGA能正确执行插值操作。Verilog代码会包含输入图像的数据读取、插值计算、结果存储等模块。 在实际工程中，实现双线性插值可能包括...
二维插值方法.rar
10-14
二维插值方法是一种在计算机图形学、图像处理和数据分析等领域广泛应用的技术，主要用于估算二维空间中未定义点的数据值。在给定的“二维插值方法.rar”压缩包中，我们很可能会找到关于这个主题的详细资料，可能包括...
图像实时缩放的FPGA实现，二次线性插值的Verilog实现。
02-27
在本文中，我们将深入探讨如何使用FPGA（Field-Programmable Gate Array）实现图像实时缩放，并专注于其中的关键技术——二次线性插值。这一技术在数字图像处理领域广泛应用，尤其是在需要高质量图像缩放的场合。...
Vue学习第二章-插值的操作
codekiang的博客
02-22 152
插值操作 这一章简单可以跟第三章一起学完。 插值操作有：v-once,v-html,v-text,v-pre等 上一章提到的mustache(双大括号语法)就是其中的插值操作。 v-once v-once 表示元素跟组件只会被渲染一次，不会随着改变数据而改变 <!DOCTYPE html> <html lang="en"> <head> <meta...
（三）插值操作
qq_45853870的博客
10-18 194
（三）插值操作 3.1 Mustache语法 ​ mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。 ​ 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
[Vue学习笔记] 插值 - HTML 标签
GYK0812的博客
01-31 325
使用 {{ 变量 }} 的方式在HTML 中添加值， 此时变量会以字符串的形式显示，那么如果我们想添加的变量对应的是一个 HTML 标签，应该如何操作呢？ <p id="app">Using mustaches: <span v-html="rawHtml"></span></p> <script type="text/javascript"> var vm = new Vue({ el: '#app'
插值--原始HTML
蓝墨の学习笔记
08-27 804
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>插值--原始 HTML</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app
如何用HTML语言图像插值,指令1——（插值表达式/v-cloak/v-text/v-html）
weixin_34794738的博客
06-04 777
一、mustache插值表达式即两个大括号({{}})，在标签元素内容中使用，传入变量，显示Vue对象data中的值。{{ msg }}var vm = new Vue({el:'#app',data:{msg:'123'}})浏览器显示二、v-cloak网速慢时，页面会闪现标签里插值表达式，例如{{ msg }}。使用v-cloak，还没渲染完时有这个属性的的样式设为隐藏，渲染完v-cloak标...
在vue中举例说明html差值,vue模板语法-插值详解
weixin_35857552的博客
06-21 385
1.文本数据绑定最常见的形式就是使用‘Mustache'语法(双打括号)的文本插值：message:{{msg}}使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。但请留心这回影响到该节点上所有的数据绑定：this will nver change:{{message}}2.纯html双打括号会将数据解释为纯文本，而非html。为了输出html可以使用v-html指令...
如何用HTML语言图像插值,web前端vue实现插值文本和输出原始html
weixin_33993891的博客
06-04 206
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在vue里最常见的数据绑定是使用“Mustache”语法 (双大括号) 的文本插值：Message: {{ value }} // 插值文本无论何时，绑定的数据对象上 value 属性发生了...
第二章 模板应用
最新发布
FrontEndEngineer的博客
09-15 657
v-if指令可以和v-else指令结合使用，设置了v-else指令的元素必须紧跟在v-if或v-else-if指令的后面，否则将不会被识别；在v-if与v-else之间，可以插入任意个v-else-if来实现多分支渲染逻辑。index索引的取值是从0开始的，当同时循环渲染多个元素时，与v-if指令类似，推荐使用template标签进行包装。本质上，Vue中的模板指令也是html标签属性，通常以“v-”开头，v-bind、v-on等都是指令；v-on可以将前缀v-on:使用@符号代替，如。
v-model --双向数据绑定
qq_45802159的博客
01-03 3231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值