Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
火狐Jeff
my-vue-app
提交
e4ba69d8
M
my-vue-app
项目概览
火狐Jeff
/
my-vue-app
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
my-vue-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
e4ba69d8
编写于
8月 21, 2021
作者:
J
Jeff Fox
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
计算属性 computed
上级
4a0308c5
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
123 addition
and
0 deletion
+123
-0
runoob.com/str-reverse2.html
runoob.com/str-reverse2.html
+33
-0
runoob.com/str-reverse3.html
runoob.com/str-reverse3.html
+39
-0
runoob.com/str-reverse4.html
runoob.com/str-reverse4.html
+51
-0
未找到文件。
runoob.com/str-reverse2.html
0 → 100644
浏览文件 @
e4ba69d8
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
Vue 测试实例 - 菜鸟教程(runoob.com)
</title>
<script
src=
"https://unpkg.com/vue@next"
></script>
</head>
<body>
<div
id=
"app"
>
<p>
原始字符串: {{ message }}
</p>
<p>
计算后反转字符串: {{ reversedMessage }}
</p>
</div>
<script>
const
app
=
{
data
()
{
return
{
message
:
'
RUNOOB!!
'
}
},
computed
:
{
// 计算属性的 getter
reversedMessage
:
function
()
{
// `this` 指向 vm 实例
return
this
.
message
.
split
(
''
).
reverse
().
join
(
''
)
}
}
}
Vue
.
createApp
(
app
).
mount
(
'
#app
'
)
</script>
</body>
</html>
runoob.com/str-reverse3.html
0 → 100644
浏览文件 @
e4ba69d8
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
Vue 测试实例 - 菜鸟教程(runoob.com)
</title>
<script
src=
"https://unpkg.com/vue@next"
></script>
</head>
<body>
<div
id=
"app"
>
<p>
原始字符串: {{ message }}
</p>
<p>
使用 computed 计算后反转字符串: {{ reversedMessage }}
</p>
<p>
使用 methods 计算后反转字符串: {{ reversedMessage2() }}
</p>
</div>
<script>
const
app
=
{
data
()
{
return
{
message
:
'
RUNOOB!!
'
}
},
computed
:
{
// 计算属性的 getter
reversedMessage
:
function
()
{
// `this` 指向 vm 实例
return
this
.
message
.
split
(
''
).
reverse
().
join
(
''
)
}
},
methods
:
{
reversedMessage2
:
function
()
{
return
this
.
message
.
split
(
''
).
reverse
().
join
(
''
)
}
}
}
Vue
.
createApp
(
app
).
mount
(
'
#app
'
)
</script>
</body>
</html>
runoob.com/str-reverse4.html
0 → 100644
浏览文件 @
e4ba69d8
<!DOCTYPE html>
<html>
<head>
<meta
charset=
"utf-8"
>
<title>
Vue 测试实例 - 菜鸟教程(runoob.com)
</title>
<script
src=
"https://unpkg.com/vue@next"
></script>
</head>
<body>
<div
id=
"app"
>
</div>
<script>
const
app
=
{
data
()
{
return
{
name
:
'
Google
'
,
url
:
'
http://www.google.com
'
}
},
computed
:
{
site
:
{
// getter
get
:
function
()
{
return
this
.
name
+
'
'
+
this
.
url
},
// setter
set
:
function
(
newValue
)
{
var
names
=
newValue
.
split
(
'
'
)
this
.
name
=
names
[
0
]
this
.
url
=
names
[
names
.
length
-
1
]
}
}
}
}
vm
=
Vue
.
createApp
(
app
).
mount
(
'
#app
'
)
document
.
write
(
'
name:
'
+
vm
.
name
);
document
.
write
(
'
<br>
'
);
document
.
write
(
'
url:
'
+
vm
.
url
);
document
.
write
(
'
<br>------ 更新数据 ------<br>
'
);
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm
.
site
=
'
菜鸟教程 https://www.runoob.com
'
;
document
.
write
(
'
name:
'
+
vm
.
name
);
document
.
write
(
'
<br>
'
);
document
.
write
(
'
url:
'
+
vm
.
url
);
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录