Vue基础框架

  • Z时代
  • 2024-01-10
  • 分类：综合

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基础框架 的全部内容， 来源链接： utcz.com/z/380410.html

回到顶部