2、Vue插值表达式

最新推荐文章于 2024-05-29 13:57:32 发布

zjh的学习乐园

最新推荐文章于 2024-05-29 13:57:32 发布

阅读量2.4k

点赞数 3

分类专栏： vue基础文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_46841213/article/details/115367802

版权

vue基础专栏收录该内容

25 篇文章 2 订阅

订阅专栏

Vue插值表达式

1、Vue的插值表达式{{}}
2、什么是插值表达式

1、Vue的插值表达式{{}}

主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。
{{}}对JavaScript表达式支持，例如：

 {{number + 1}}
 {{ok ? 'yes' : 'no'}}
 {{message.split('').reverse().join('')}}

2、什么是插值表达式

插值表达式是vue框架提供的指令。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        {{ demo }}<!-- 调用该模块 -->
    </div>
</body>
<script src="./Vuejs/vue2-6-12.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#box',
        data:{
            demo:'hi vuejs'//定义一个模型变量
        }
    })
</script>
</html>

插值表达式中除了可以写模型变量还可写其他东西:
①：字面量

 <div id="box">
        {{ 'abc' }}<!-- 字符串、数字等等 -->
        {{ 123 }}
 </div>

②：四则运算

<div id="box">
       <!-- 插值表达式中可以提供一个简单js语境 -->
            {{ 1+2 }} <!-- 3 -->
            {{ 'hello' + 'world' }} <!-- helloworld -->
            {{ 10*2 }} <!-- 20 -->
    </div>

③：逻辑运算

<div id="box">
        {{  true&&false  }} <!-- false-->
        {{  true || false '  }} <!-- ture -->
        {{  !true  }} <!-- false -->
 </div>

④：三目运算

<div id="box">
        <p>{{ 20 > 18 ? '成年' : '未成年' }}</p> <!-- 成年 --> 
</div>

⑤：全局函数

<div id="box">
        <p>{{ Math.random() }}</p>
        <p>{{ parseInt(12.23) }}</p>
</div>

zjh的学习乐园

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
2、Vue插值表达式

Vue插值表达式1、Vue的插值表达式{{}}2、什么是插值表达式1、Vue的插值表达式{{}} 主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。{{}}对JavaScript表达式支持，例如： {{number + 1}} {{ok ? 'yes' : 'n
复制链接

扫一扫