首页
零基础教程
分类浏览
编 程
Sentinel
Go语言
C语言
汇编语言
Android
Java工具库
Spring Cloud Alibaba
Spring Cloud
Spring Data
Spring Boot
Spring Batch
JSP/Servlet
Hadoop
Dubbo
J2Cache
Hibernate
OpenJPA
MyBatis
ShardingSphere
Freemarker
Thymeleaf
Activiti
POI
JMail
Log4j
LogBack
Dom4j
XML
RxJava
JasperReport
JUnit
JMock
Apache Commons
HttpComponents
CGLib
WebSocket
ESAPI
设计模式
前 端
CSS/CSS3
HTML5
JavaScript
JQuery
DHTMLX
浏览器
HTML
前端小知识
Vue.js
NodeJS
ECharts
Less
UmiJS
React
Ant Design
Bootstrap
uni-app
JS-XLSX
数据库
SQL
PL/SQL
MySQL
Oracle
Redis
SQLite
MongoDB
Zookeeper
H2
服务器
Podman
Prometheus
Tomcat
JBoss
RocketMQ
Docker
Nginx
RabbitMQ
其 他
程序员
Maven
SVN
Git
UML
Windows
办公软件
Axure
Jenkins
HTTP
macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具
<html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title> <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script> <!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 --> <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --> <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> </head> <body> <div id="app"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 `question` 发生改变,这个函数就会运行 question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...'; this.debouncedGetAnswer(); } }, created: function () { // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。 // 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识, // 请参考:https://lodash.com/docs#debounce this.debouncedGetAnswer = _.debounce(this.getAnswer, 500); }, methods: { // 获取答案 getAnswer: function () { // 如果问题中没有问号,则直接返回 if (this.question.indexOf('?') === -1) { this.answer = 'Questions usually contain a question mark. ;-)'; return; } this.answer = 'Thinking...'; var vm = this; // 通过 axios 调用接口 axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer); }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error; }); } } }); </script> </body> </html>
在线代码编辑器
代码编辑区
自动执行
运行
选择模板
选择JS库
预览效果
清空
切换主题
字符数: 0
提示: 输入完整的HTML代码,包括<!DOCTYPE>和<html>标签
更多工具
Base64 加密/解密工具
JSON 格式化工具
密码随机生成工具
哈希值计算工具
时间戳转换工具
图片 & Base64 互转
HTTP 客户端
Websocket 客户端
选择模板
取消
选择库和版本
库
版本
文件
取消
已复制到剪贴板
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
链接
免责声明
隐私政策
其他应用
开源镜像网站
公众号
©2018-2020 hxstrive.com 版权所有 ICP证:
蜀ICP备14031461号-2
川公网安备51010802032098