Vue初体验（三），表达式的使用{{}}

来源：互联网发布：全国高校校花知乎编辑：程序博客网时间：2024/06/05 20:53

1、表达式是使用{{}}双重大括号绑定起来的js代码块，和angular不同的是，在vue中，提供了完全的JavaScript表达式支持。
使用方式：在data中申明变量，在{{}}中进行js操纵。
最简单的表达式就是文本。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <p>{{message}}</p>        </div>        <script>            new Vue({                el: '#app',                data: {                    message: "mapbar_front很厉害！"                }            })        </script>    </body></html>

其次，还支持各种逻辑运算和算术运算。比如这样：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue学习</title>        <script src="https://unpkg.com/vue/dist/vue.js"></script>    </head>    <style>        .style{            color: red        }    </style>    <body>        <div id="app">            <p>{{a+b}}</p>            <p>{{isShow?"true":"fase"}}</p>            <p>{{message.split('').reverse().join('') }}</p>        </div>        <script>            new Vue({                el: '#app',                data: {                    a: 1,                    b: 2,                    isShow: true,                    message: "abc"                }            })        </script>    </body></html>

结果是这样的：
这里写图片描述

但是，Vue支持的是表达式，并且是单个表达式，所以不支持语句，控制流等。
类似这样的：

<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会生效，请使用三元表达式 -->{{ if (ok) { return message } }}

1 0