vue中的插值表达式

最新推荐文章于 2024-05-08 23:35:06 发布

wuliangfan

最新推荐文章于 2024-05-08 23:35:06 发布

阅读量6.3k

点赞数

分类专栏： vue相关

本文链接：https://blog.csdn.net/wuliangfan/article/details/96427688

版权

vue相关专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理
用法：使用在vue实例对象对应的DOM元素的html的正反标签之间
- 支持匿名变量
- 支持三目运算符
- 数值
  - 支持四则运算
  - 支持比较运算符
  - 支持数值类型的一些内置方法
- 数组
  - 支持数组的索引取值方法
- 对象：支持对象的属性
- window内置对象的Math的属性和方法：如果data中也有一个Math，那么vue对象的数据仓库优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 字符串 -->
        <p>{{ str }}</p> <!--页面展示：字符串-->
        <p>{{ num + 'aaa'}}</p><!--页面展示：1aaa-->
        <p>{{ str.length }}</p> <!--页面展示：3-->
        
        <!-- 数值 -->
        <p>{{ num }}</p> <!--页面展示：1-->
        <p>{{ num+num1 }}</p> <!--页面展示：101-->
        <p>{{ num > num1 }}</p>  <!--页面展示：false-->
        <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00-->
        
        <!-- boolean -->
        <p>{{ flag }}</p> <!--页面展示：true-->
        
        <!-- 数组 -->
        <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]-->
        <p>{{ arr[3] }}</p> <!--页面展示：4-->

        <!-- 对象 -->
        <p>{{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }-->
        <p>{{ obj.name }}</p> <!--页面展示：tom-->
        
        <!-- null/undefined/NaN -->
        <p>{{ arg1 }}</p> <!--页面展示：-->
        <p>{{ arg2 }}</p> <!--页面展示：-->
        <p>{{ arg3 }}</p> <!--页面展示：NaN-->

        <!-- 三目运算符 -->
        <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否-->

    </div>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                str: '字符串',
                num: 1,
                num1:100,
                flag: true,
                arr: [1,2,3,4],
                obj:{
                    name:'tom',
                    age:20
                },
                arg1: null,
                arg2: undefined,
                arg3: NaN
            }
        })
    </script>
</body>
</html>

数据来源：对应的vue实例对象的data仓库以及window内置对象的Math
原理：使用的是dom对象的innerText属性，所以不会做字符串解析
vue改写了js中的toString()方法

// undefined == null; 比较如果是同类型则直接对比，如果不是则转换成Boolean进行对比
// typeof数组 也是object
// 对象如果使用toString(),则转换成[object object]

function toString (val) {
  return val == null? ''//如果是null，则转换成空字符串
    : typeof val === 'object'//如果是对象，使用JSON.stringify转换成字符串
      ? JSON.stringify(val, null, 2)
      : String(val)//如果是两者都不是，则强转成字符串
}

wuliangfan

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
vue中的插值表达式

前言：在html页面上只能展示字符串，console.log()打印出的也是字符串，意味着都会调用toString()方法，但实际上控制台展示的既有数组又有对象等类型，那是由于浏览器会进行处理用法：使用在vue实例对象对应的DOM元素的html的正反标签之间支持匿名变量支持三目运算符数值支持四则运算支持比较运算符支持数值类型的一些内置方法 ...
复制链接

扫一扫