<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 设置语言为中文 --> <meta http-equiv="Content-Language" content="zh-cn" /> <!-- 禁止百度转码 --> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 是否开启cleartype显示效果 --> <meta http-equiv="cleartype" content="on" /> <meta name="skype_toolbar" content="skype_toolbar_parser_compatible" /> <!-- 优先使用最新的chrome版本 --> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit" /> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true" /> <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> <!-- 开启 safe-area-inset-bottom 属性 --> <van-number-keyboard safe-area-inset-bottom /> <!-- 设置手持设备支持 --> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <!-- 使用 Vue 框架 --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> </head> <body> <div id="app"> <div v-text="msg"></div> <button @click="changeText" v-text="button"></button> </div> </body> <script> let _this; var app = new Vue({ el: "#app", data() { return { msg: 'hello world', button: '转换大小写' }; }, beforeCreate() { _this = this; }, watch: { }, computed: { }, methods: { changeText() { if (_this.msg == 'hello world') { let msg = _this.msg.replace(/(w)/g, (m) => { // 转换为首字母大写 return m.toUpperCase(); }); _this.msg = msg; } else { _this.msg = _this.msg.toLowerCase(); // 转换为小写 } } }, created() { }, mounted() { }, destroyed() { }, filters: { } }) </script> </html>