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

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

mapbar_front

19762人浏览 · 2017-05-14 13:26:21

mapbar_front · 2017-05-14 13:26:21 发布

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 } }}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^