Vue 教程
选项 API
选项 API 是本教程其他地方使用的内容。
本教程选择选项 API 是因为它具有易于识别的结构，并且对于初学者来说更容易上手。
举个例子，选项 API 中的结构将数据属性、方法和计算属性全部放置在 Vue 实例的不同部分，并明确分开。
这是上面用选项 API编写的示例:
示例
App.vue:
<template>
<h1>示例</h1>
<img src="/img_typewriter.jpeg" alt="Typewriter">
<p>Typewriters left in storage: {{ typeWriters }}</p>
<button @click="remove">Remove one</button>
<p style="font-style: italic;">"{{ storageComment }}"</p>
</template>
<script>
export default {
data() {
return {
typeWriters: 10
};
},
methods: {
remove(){
if(this.typeWriters>0){
this.typeWriters--;
}
}
},
computed: {
storageComment(){
if(this.typeWriters > 5) {
return "Many left"
}
else if(this.typeWriters > 0){
return "Very few left"
}
else {
return "No typewriters left"
}
}
}
}
</script>
相关视频
24小时阅读榜
精品课程
独孤九贱(2)_CSS视频教程
共22课时
24.3万人学习
独孤九贱(3)_JavaScript视频教程
共28课时
36.2万人学习
独孤九贱(4)_PHP视频教程
共89课时
133.1万人学习
热门下载
phpStudy 2018最新版
集成PHP7，16种组合，超全大合集
下载
vc9-vc14（32+64位）运行库合集（链接在下方）
phpStudy安装所需运行库集合下载
下载
php程序员工具箱完整版
程序员工具箱 v1.0 php集成环境
下载
SublimeText3汉化版
中文版，非常好用
下载
Notepad++ Windows版
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
phpStudy V8.1（Win64位）（已支持php8）
Win64位，支持php多版本共存
下载