Vue基础框架

<!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基础框架

最新文章

热门文章
