<!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. oracle学习笔记（二十三）——JDBC调用存储过程以及批量操作

    jdbc调用存储过程 使用并获得out模式的参数返回值 //存储过程为sum_sal(deptno department.deptno%type,sum in out number) Callable ...

  2. 在Vue中使用i18n 国际化遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

    最近用Vue在搭建前端框架,在引用i18n时,运行的时候报错:Uncaught TypeError: Cannot assign to read only property 'exports' of ...

  3. JS基础语法---分支语句之：if语句，if-else语句，if-ever if语句

    //if语句只有一个分支 //if-else语句有两个分支,最终执行一个分支 //if-else if-else if-else if-else if..........else---多分支,最终也是 ...

  4. JavaScript深入浅出第1课：箭头函数中的this究竟是什么鬼？

    <JavaScript 深入浅出>系列: JavaScript 深入浅出第 1 课:箭头函数中的 this 究竟是什么鬼? JavaScript 深入浅出第 2 课:函数是一等公民是什么意 ...

  5. Kali linux-信息收集-dmitry

    信息收集-dmitry DMitry(Deepmagic Information Gathering Tools 深度信息收集工具)是一个kali linux下用C语言写的工具.主要功能为端口扫描,w ...

  6. 配置flutter For IOS

    https://www.cnblogs.com/lovestarfish/p/10628205.html 第一步,下载flutter最新版,解压到自己的目录里: 提供网址:https://flutte ...

  7. rocksdb和leveldb的bloom filter比较

    memtable中的bloom filter rocksdb在memtable中添加了prefix bloom filter,就是对key取prefix,然后把这个prefix加入到bloom fil ...

  8. MongoDB 读偏好设置中增加最大有效延迟时间的参数

    在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...

  9. [PHP] error_reporting(0)可以屏蔽Fatal error错误

    按照以前的印象,error_reporting(0)屏蔽不了php的Fatal error级别的错误.但是今天我遇到了一个问题才发现,它竟然可以屏蔽任何错误,包括Fatal error,浏览器会看不到 ...

  10. 5-4 可视化库Seaborn-回归分析

    In [2]: %matplotlib inline import numpy as np import pandas as pd from scipy import stats,integrate ...