表达式
这个表达式又是什么?其实这里说的是 js的表达式。翻译成土话就是,js代码,也就是说,vue里面,我们一样可以写js代码。怎么样,我说应该先学js吧?不学的话很多基础的计算都没法搞了。
那么在哪写呢?比如我们有个把字符串原地翻转的需求。要怎么实现呢?
来看这个例子:
图中,写了四行dom,意思是在给我们展示这几种用法。我们一行一行看。
- 直接在dom中写 数字的加法,这种就叫js表达式,也就是类似于python,java这样的 一句代码,怎么样,厉害吧,vue居然可以把代码直接通过 {{ }} 包裹的形式 写在dom层里,还能计算出来 5+5=10。有人问br是什么意思,这个是换行。
- 三元表达式,并且带了变量,这个变量名就是 ok,ok自然是在vue构造器的data里已经定义好了,默认为true,所以这个三元表达式意思就是 如果为真,则展示字符串'YES' ,否则为'NO'。大家不要对三元表达是不熟悉,js就是这么写的,python写法也非常相似。
- 原地翻转字符串变量:message,message自然也是在vue构造器的data中声明了,默认值是"RUNOOB",js的字符串原地翻转和python类似,是先通过.split('')变成列表,然后对列表用列表的方法.reverse()来翻转,然后再用.join('')的方式拼接回字符串,来实现字符串反转。
- 通过我们上节课学习的属性绑定v-bind:,把div-菜鸟教程这个元素的id变成固定字符串list-加上变量id 的状态,这个加法居然可以写到属性里,真是牛逼。
注意,在右侧的结果中我们直接是看不出来这个 元素的id是否真的为 list-1,所以我们要通过f12的element来看看这个元素的完整源码:
到此,今天就讲完了js表达式的使用方法了,也就是说,这个表达式的变量都可以从vue构造器的data里面去拿,而表达式本身可以写在dom层里,甚至可以写到元素的属性绑定的 值里。