<!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(/\b(\w)/g, (m) => {  // 转换为首字母大写

                        return m.toUpperCase();

                    });

                    _this.msg = msg;

                } else {

                    _this.msg = _this.msg.toLowerCase(); // 转换为小写

                }

            }

        },

        created() {

        },

        mounted() {

        },

        destroyed() {

        },

        filters: {

        }

    })

</script>

</html>

Vue基础框架的更多相关文章

  1. django+vue 基础框架 ：vue

    <template> <div> <p>用户名:<input type="text" v-model="name"&g ...

  2. django+vue基础框架：django one对one格式

    创建app:python manage.py startapp  app01(这里的app01是指名字,可以是a或b等等) 生成迁移文件:python manage.py makemigrations ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. vue 前端框架 目录

    vue 前端框架 目录   vue-目录 ES6基础语法 vue基础语法 Vue.js的组件化思想 —上 Vue.js的组件化思想 —下 Vue + Vue-Router结合开发 SublimeSer ...

  7. python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  8. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  9. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

随机推荐

  1. Maven设置本地仓和阿里云远程仓

    在maven项目导入jar包坐标时需要连接maven官方仓库下载,但是下载速度感人,所以来修改一下设置. 设置成为本地仓和连接阿里云的远程仓库. (本地仓如果没有这个jar) 找出相应配置文件:例如我 ...

  2. C++ 流插入"<<"和流提取">>"运算符的重载

    01 流插入<<运算符的重载 C++ 在输出内容时,最常用的方式: std::cout << 1 <<"hello"; 问题: 那这条语句为什么 ...

  3. js中的作用域

    作用域:      域:空间.范围.区域…… 作用:读.写 浏览器:“JS解析器” 1)“找一些东西” :var  function 参数 a = ...未定义所有的变量,在正式运行代码之前,都提前 ...

  4. CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  5. canvas绘制流程图

    最近在做一个需求,根据数据动态生成以下类似的流程图,需要可以设置每个节点的颜色,每个节点可添加点击移动等相关的事件 代码中有做很多的注释和说明,相关的文档说明链接:https://9eb75i.axs ...

  6. Java 数学操作类

    数学操作类 Math类 数学计算操作类 类属性值 Math.E ^ Math.PI 圆周率 类方法 Math类中,一切方法都是 static 型,因为Math类中没有普通属性. round() 方法 ...

  7. DS12C887实时时钟

    实物图 引脚定义 GND. VCC:直流电源,其中VCC接+5V输入,GND接地,当VCC输入为+5V时,用户可以访问DS12C887内RAM中的数据,并可对其进行读.写操作:当VCC的输入小于+4. ...

  8. SQL学习_SELECT

    查询列: SQL:SELECT name FROM heros 多列查询: SQL:SELECT name, hp_max, mp_max, attack_max, defense_max FROM ...

  9. Vue实战狗尾草博客管理平台第六章

    Vue实现狗尾草博客后台管理系统第六章 本章节内容 文章列表 文章详情 草稿箱 文章发布. 本章节内容呢,开发的很是随意哈,因为多数就是element-ui的使用,熟悉的童鞋,是可以很快完成本章节的内 ...

  10. 027.[转] 理解OAuth 2.0

    作者: 阮一峰 日期: 2014年5月12日 http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth是一个关于授权(authorizat ...