《跟热饭一起学习vue吧》Part.4 表达式

表达式

这个表达式又是什么？其实这里说的是 js的表达式。翻译成土话就是，js代码，也就是说，vue里面，我们一样可以写js代码。怎么样，我说应该先学js吧？不学的话很多基础的计算都没法搞了。

那么在哪写呢？比如我们有个把字符串原地翻转的需求。要怎么实现呢？

来看这个例子：

图中，写了四行dom，意思是在给我们展示这几种用法。我们一行一行看。

1. 直接在dom中写 数字的加法，这种就叫js表达式，也就是类似于python，java这样的 一句代码，怎么样，厉害吧，vue居然可以把代码直接通过 {{ }} 包裹的形式 写在dom层里，还能计算出来 5+5=10。有人问br是什么意思，这个是换行。

1. 三元表达式，并且带了变量，这个变量名就是 ok，ok自然是在vue构造器的data里已经定义好了，默认为true，所以这个三元表达式意思就是 如果为真，则展示字符串'YES' ,否则为'NO'。大家不要对三元表达是不熟悉，js就是这么写的，python写法也非常相似。

1. 原地翻转字符串变量：message，message自然也是在vue构造器的data中声明了，默认值是"RUNOOB",js的字符串原地翻转和python类似，是先通过.split('')变成列表，然后对列表用列表的方法.reverse()来翻转，然后再用.join('')的方式拼接回字符串，来实现字符串反转。

1. 通过我们上节课学习的属性绑定v-bind:，把div-菜鸟教程这个元素的id变成固定字符串list-加上变量id 的状态，这个加法居然可以写到属性里，真是牛逼。

注意，在右侧的结果中我们直接是看不出来这个 元素的id是否真的为 list-1，所以我们要通过f12的element来看看这个元素的完整源码：

到此，今天就讲完了js表达式的使用方法了，也就是说，这个表达式的变量都可以从vue构造器的data里面去拿，而表达式本身可以写在dom层里，甚至可以写到元素的属性绑定的 值里。

好了本节课就到这里，怎么样，是不是感觉很简单？？？