VueJS表达式

表达式是Vue中视图模板的一种语法结构. 将数据绑定(输出)到HTML中

表达式语法

VueJS表达式写在双大括号内：{{ expression }}。

VueJS表达式把数据绑定到 HTML。

VueJS将在表达式书写的位置"输出"数据。

VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。

简单表达式

在{{ }}中可以进行简单的运算

<div id="app">
    {{1+2}} <!--数字运算-->
    <br/>
    {{"abc" + "def"}}
    <br/>
    {{"123" + "123"}}
    <br/>
    {{"123" - "123"}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app"
    });
</script>

数字操作

1. 在{{}}中的表达式可以使用data中数据
2. 在{{}}中的表达式可以使用三元运算符,但是不能够使用其他语句

<div id="app">
   num1 + num2 = {{num1 + num2}} <br/>
   {{num1}} + {{num2}} = {{num1+num2}}<br/>
    {{ show1?"真":"假"}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   var app = new Vue({
       el: "#app",
        data: {
           num1: 100,
            num2: 200,
            show1: true
        }
    });
</script>

字符串操作

1.  直接使用字符串字面值作为字符串对象
2.  使用data中的字符串对象

<div id="app">
    {{"这是字面值"}}<br/>
    {{"这是字面值".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "这是data中的数据"
        }
    });
</script>

对象操作

在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样

<div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var user = {
        name: "张三",
        age: 29,
        getAge: function () {
            return this.age
        },
        toString:function(){
            return "姓名:"+this.name+",年龄:"+this.age;
        }
    };
    var app = new Vue({
        el: "#app",
        data: {
            user: user
        }
    });
</script>

数组操作

在表达式中可以使用JavaScript数组中的任何语法来操作数组.

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
        }
    });
</script>