Vue初体验(三),表达式的使用

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


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

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


<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初体验(三),表达式的使用_第1张图片

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


{{ var a = 1 }}

{{ if (ok) { return message } }}

你可能感兴趣的:(Vue)