Vue 3.x 插值表达式

最新推荐文章于 2024-05-20 17:02:17 发布

who_am_i__

最新推荐文章于 2024-05-20 17:02:17 发布

阅读量101

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u012961612/article/details/133610548

版权

插值表达式

在Vue 3中，插值表达式仍然是一种常用的方式来将数据动态渲染到模板中。Vue 3的插值表达式使用双大括号（{{ … }}）将表达式包裹起来。例如：

<p>{{message}}</p>

应用

基本语法

使用{{}}可以把app.data()中的内容渲染到，页面上。例如：

<!-- 这段代码可以把text的值展示在页面上 -->
<div id="app">
    {{text}}
</div>

原始html插值

直接把含有html代码的字符串，直接使用插值表达式会把html标签直接显示在文本上，不会使用html代码渲染页面。我们可以使用v-html指令实现html字符串的渲染。

注意：如果在原始html中使用插值表达式是无效的（可以查看代码示例）。

属性插值

属性插值就是在html元素的属性上使用插值表达式，这里需要结合v-bind指令一起使用。v-bin指令可以使用:属性名的方式代替。例如：

# 属性插值应用，把style的内容使用styleExpression代替
<div id="app">
    <span :style="styleExpression"></span>
</div>

JavaScript 表达式插值

在插值表达式中我们可以使用JavaScript代码。例如：

// 使用三目运算
{{ ok ? true : false }}
// 在页面上显示一个随机值
{{ Math.random() }}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插值表达式Example</title>
  <!-- 引入 Vue 3 库文件 -->
  <script src="./js/libs/vue.global.js"></script>
</head>
<body>
  
  
  <h1>插值表达式</h1>
  <div id="app"> 
    <!-- 使用自定义组件 -->
    <!--使用v-once指令时页面数据不会改改变-->
    <div @click="" v-once>{{message}}</div> 

     <!--  v-html 指令可以把rawHtml作为html文本进行解析，
      否则会把rawhtml作为一个单纯的字符串直接显示  但是其中的插值表达式并不会起作用
    -->
    <div v-html="rawHtml"></div>
    <span  :style="style">属性插值</span>
    </br>
    <!-- v-bind 绑定属性插值 -->
    <input type="checkbox" v-bind:checked="isChecked">test</input>
    <!-- 差之表达式内容会作为js代码解析 -->
    <div>{{Math.random()}}</div>
    <a :href="url">百度</a>
  </div>

  <script type="module">

    const app = Vue.createApp({
      data(){
        return {
          message: "custom component",
          rawHtml: "<span>这是一段用span标签包裹的文本{{message}}</span>",
          style: "color:red;",
          isChecked: false,
          url: "https://www.baidu.com"
        }
      }
    });


    app.mount('#app');
  </script>
</body>
</html>

效果

who_am_i__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 3.x 插值表达式

在Vue 3中，插值表达式仍然是一种常用的方式来将数据动态渲染到模板中。Vue 3的插值表达式使用双大括号（{{ …直接把含有html代码的字符串，直接使用插值表达式会把html标签直接显示在文本上，不会使用html代码渲染页面。属性插值就是在html元素的属性上使用插值表达式，这里需要结合v-bind指令一起使用。使用{{}}可以把app.data()中的内容渲染到，页面上。在插值表达式中我们可以使用JavaScript代码。如果在原始html中使用插值表达式是无效的（可以查看代码示例）。
复制链接

扫一扫