Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
0b846538
U
uni-app
项目概览
DCloud
/
uni-app
3 个月 前同步成功
通知
725
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0b846538
编写于
4月 12, 2021
作者:
Anne_LXM
提交者:
Gitee
4月 12, 2021
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs/vue-basics.md.
新增JavaScript 表达式文档
上级
95d7bbed
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
119 addition
and
0 deletion
+119
-0
docs/vue-basics.md
docs/vue-basics.md
+119
-0
未找到文件。
docs/vue-basics.md
浏览文件 @
0b846538
...
...
@@ -261,6 +261,125 @@ vue 是单页面应用,使页面局部刷新,不用每次跳转页面都要
{{msg}}里的内容将会被替代为对应数据对象上msg的值。无论何时,绑定的数据对象上msg发生了改变,插值处的内容都会更新。
#### 使用 JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的
`property`
键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的
`JavaScript`
表达式支持。
```
html
<template>
<view>
<view>
{{ number + 1 }}
</view>
<view>
{{ ok ? 'YES' : 'NO' }}
</view>
<!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
<view>
{{ message.split('').reverse().join('') }}
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
number
:
1
,
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
}
</script>
```
```
html
<template>
<view>
<view
v-for=
"(item,index) in 10"
>
<!-- 通过%运算符求余数,实现隔行换色的效果 -->
<view
:class=
"'list-' + index%2"
>
{{index%2}}
</view>
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
}
}
}
</script>
<style>
.list-0
{
background-color
:
#aaaaff
;
}
.list-1
{
background-color
:
#ffaa7f
;
}
</style>
```
这些表达式会在所属 Vue 实例的数据作用域下作为
`JavaScript`
被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
```
html
<template>
<view>
<!-- 这是语句,不是表达式 -->
<view>
{{ var a = 1 }}
</view>
<!-- 流控制也不会生效,请使用三元表达式 -->
<view>
{{ if (ok) { return message } }}
</view>
</view>
</template>
<script>
export
default
{
data
()
{
return
{
ok
:
true
,
message
:
'
Hello Vue!
'
}
}
}
</script>
```
> 模板表达式都被放在沙盒中,只能访问**全局变量的一个白名单**:
> - `Infinity`
> - `undefined`
> - `NaN`
> - `isFinite`
> - `isNaN`
> - `parseFloat`
> - `parseInt`
> - `decodeURI`
> - `decodeURIComponent`
> - `encodeURI`
> - `encodeURIComponent`
> - `Math`
> - `Number`
> - `Date`
> - `Array`
> - `Object`
> - `Boolean`
> - `String`
> - `RegExp`
> - `Map`
> - `Set`
> - `JSON`
> - `Intl`
>
> 你不应该在模板表达式中试图访问用户定义的全局变量。
### 指令
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录