Vue3+Vite实现工程化,插值表达式和v-text以及v-html

1、插值表达式

插值表达式最基本的数据绑定形式是文本插值,它使用的是"Mustache"语法,即 双大括号{{}}

  • 插值表达式是将数据 渲染 到元素的指定位置的手段之一
  • 插值表达式 不绝对依赖标签,其位置相对自由
  • 插值表达式中支持javascript的 运算表达式
  • 插值表达式中也支持 函数的调用
html 复制代码
<script setup>

            let msg = "hello vue!";

            let hello = function () {
              return "hello world!"
            };

            let getMsg=()=>{
              return "hello vue3 message";
            }
            let age = 19;
            let bee = "蜜 蜂";

            //购物车
            const carts = [{name: "可乐", price: 3, number: 10}, {name: "薯片", price: 6, number: 8}];

            //计算购物车总金额
            function compute() {
              let count = 0;
              for (let index in carts) {
                count += carts[index].price * carts[index].number;
              }
              return count;
            }

</script>

<template>

  <div>
              <!--1、插值表达式 -->
              {{msg}}<br>      <!--插值表达式不依赖于标签,可以直接输入变量-->
              {{msg+"2023"}}<br>   <!--插值表达式支持运算-->
              {{msg.toUpperCase()}}<br>  <!--插值表达式支持函数调用-->
              {{hello()}}<br>                <!--插值表达式支持函数-->

              <h1>{{msg}}</h1><br>
              msg的值为:{{msg}}<br>
              getMsg返回的值为:{{getMsg()}}<br>
              是否成年:{{age>18?"true":"false"}}<br>
              反转:{{bee.split(" ").reverse().join("-")}}<br>

              购物车总金额:{{carts[0].price*carts[0].number+carts[1].price*carts[1].number}}<br>
              购物车总金额:{{compute()}}<br>
  </div>

</template>

2、v-text和v-html

为了渲染双标中的文本,我们也可以选择使用v-text和v-html命令

  • v-*** 这种写法的方式使用的是 vue的命令
  • v-*** 的命令必须依赖元素,并且要写在元素的 开始标签
  • v-***指令支持 ES6中的字符串模板
  • v-text可以将数据渲染成双标签中间的文本,但是不识别html元素结构的文本
  • v-html可以将数据渲染成双标签中间的文本,识别html元素结构的文本
html 复制代码
<script setup>

              let str = "<input type='text' value='99'/>";

              let msg = "hello vue3";
              let getMsg=()=>{
                return msg;
              }
              let age = 19;
              let bee = "蜜 蜂";
              let redMsg='<font color="red">msg</font>'
              let greenMsg = '<font color="green">${msg}</font>';
</script>

<template>

  <div>
                <!--2.v-text和v-html-->
                <p v-text="str"></p><!--innerText()-->
                <p v-html="str"></p><!--innerHTML()-->

                <span v-text="msg"></span><br>
                <span v-text="redMsg"></span><br>
                <span v-text="getMsg()"></span><br>
                <span v-text="age>18?'成年':'未成年'"></span><br>
                <span v-text="bee.split(' ').reverse().join('-')"></span><br>

                <h1>=============</h1>

                <span v-html="msg"></span><br>
                <span v-html="redMsg"></span><br>
                <span v-html="greenMsg"></span><br>
                <span v-html="`<font color='green'>${msg}</font>`"></span>


  </div>

</template>
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架