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

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


表达式

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

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

来看这个例子:

image.png

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

相关文章
|
2月前
|
监控
【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)
【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(下)
【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(上)
【Vue3】学习watch监视:深入了解Vue3响应式系统的核心功能(上)
|
1月前
|
JavaScript
vue3学习 ref和reactive的使用
vue3学习 ref和reactive的使用
16 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(6 / 6)
Vue.js学习详细课程系列--共32节(6 / 6)
28 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(5 / 6)
Vue.js学习详细课程系列--共32节(5 / 6)
30 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(4 / 6)
Vue.js学习详细课程系列--共32节(4 / 6)
35 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(3 / 6)
Vue.js学习详细课程系列--共32节(3 / 6)
12 0
|
2月前
|
JavaScript
Vue.js学习详细课程系列--共32节(2 / 6)
Vue.js学习详细课程系列--共32节(2 / 6)
30 0
|
2月前
|
Web App开发 移动开发 JavaScript
Vue.js学习详细课程系列--共32节(1 / 6)
Vue.js学习详细课程系列--共32节(1 / 6)
43 0
|
2月前
|
存储 监控 JavaScript
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)
Vue之插值表达式,v-bind(单向绑定),v-model(双向绑定)