vue中的插值表达式

Posted wuliangfan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中的插值表达式相关的知识,希望对你有一定的参考价值。

  •  前言: 在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)//如果是两者都不是,则强转成字符串

以上是关于vue中的插值表达式的主要内容,如果未能解决你的问题,请参考以下文章

vue中的插值表达式

Vue 的插值语法

三、插值表达式

9 插值表达式 v-on:clickv-htmlv-bind:title

Vue 插值表达式的使用

JavaWeb:案例学习使用VUE中常用指令和插值表达式,VUE生命周期函数 mounted