v-cloak-天翼云

v-cloak

2023-05-10 06:02:06 阅读次数：251

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X_UA-Compatible" content="ie=edge">
    <title>vue 入门</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <!--1 导入vue.js库-->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <!--插值表达式，只会替换自己的占位符，不会把整个元素清空-->
        <p v-cloak>--------{{msg}}-------</p>
        <!--会将整个元素原有值清空-->
        <h4 v-text="msg">--------------------</h4>
        <!--将msg的内容按html样式输出-->
        <h5 v-html="msg"></h5>
        <!--v-bind:xxx用于绑定属性的指令，会将引号内的内容当做js脚本执行
        简写模式 ::title="btTitle + 'aaa' "
        -->
        <input type="button" value="v-bind:" v-bind:title="btTitle + 'aaa' " />

        <input type="button" value="冒号:" :title="btTitle + 'bbb' " />
        <!--Vue中提供了v-on事件绑定机制
        缩写是@
        -->
        <input type="button" value="v-on:click" :title="btTitle + 'bbb' " v-on:click="show" />
        <input type="button" value="@" :title="btTitle + 'bbb' " @click="show" />
        <input type="button" value="v-on:mouseover" :title="btTitle + 'bbb' " v-on:mouseover="show" />
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'test',
                btTitle: "我是一个按钮"
            },
            methods: {   //定义当前Vue实例的所有方法
                show: function () {
                    alert('hello')
                }
            }

        })

    </script>
</body>

</html>

活动

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

v-cloak

v-cloak

相关文章

MySQL索引的类型与优化方法

SQL数据库学习：从基础到进阶的系统化教程

SQL SELECT语句的优化与性能提升策略

SQL DISTINCT关键字的使用场景与优化建议

优化Spring Boot应用的数据库访问性能

使用Hibernate实现复杂数据库查询优化策略

服务器数据恢复—EVA存储磁盘组硬盘读写性能不稳定被EVA控制器踢出的数据恢复案例

基于Java的美食推荐管理系统设计与实现(源码+lw+部署文档+讲解等)

Java中的高效数据查询与索引优化

MySQL：CRUD进阶

作者介绍

最新文章

SQL SELECT语句的优化与性能提升策略

SQL DISTINCT关键字的使用场景与优化建议

SQL查询全揭秘：从流程到优化，EXPLAIN命令的完美应用

LINUX随笔九 nohup失效和镜像源

Ext JS GridPanel + Sqllite + 查询分页

国标目录查询以及订阅

热门文章

关于用户表根据userId分库后根据userName查询问题的思考

Lucene查询语法和使用

SqlServer查询计划

myBatisPlus-查询

MyBatis的动态Sql查询(七)

ElasticSearch中结构化查询（term、terms、range、exists、match、bool）

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

Ext JS GridPanel + Sqllite + 查询分页

ElasticSearch中结构化查询（term、terms、range、exists、match、bool）

关于用户表根据userId分库后根据userName查询问题的思考

Lucene查询语法和使用

ES的复杂查询(三)

myBatisPlus-查询