第一个vue程序

<body>

    <div class="app">

        {{message}}--{{message+','+message}}

        <div :id='message' v-if="showMessage">{{title}}</div>

        <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div>

        <div :id='message' v-show="showMessage">{{title}}</div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                message:'hello world',

                showMessage:false,

                title:"是否删除"

            }

        })

    </script>

</body>
  • 里面的el可以是id属性，也可以是class属性，如id="app",则el:'#app',如果class="app",则el:'.app'
  • 指令v-if和v-show:v-if判断为false，则不加入到页面dom节点中，而v-show则只是设置该div或其他标签的display:none

第一个vue程序(极客时间Vue视频笔记)的更多相关文章

  1. 极客时间-vue开发实战学习（ant-design vue作者）

    vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...

  2. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. vue组件事件(极客时间Vue视频笔记)

    vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...

  4. vue组件注册(极客时间Vue视频笔记)

    vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...

  5. java爬虫系列第四讲-采集"极客时间"专栏文章、视频专辑

    1.概述 极客时间(https://time.geekbang.org/),想必大家都知道的,上面有很多值得大家学习的课程,如下图: 本文主要内容 使用webmagic采集极客时间中某个专栏课程生成h ...

  6. 极客时间_Vue开发实战_汇总贴

    视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...

  7. 左耳朵耗子：我为什么要在极客时间 App 开设独家专栏？

    参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...

  8. 极客时间 Mysql实战45讲 07讲行锁功过：怎么减少行锁对性能的影响笔记 极客时间

    极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间 笔记体会: 方案一,事务相 ...

  9. Mysql实战45讲 06讲全局锁和表锁：给表加个字段怎么有这么多阻碍 极客时间 读书笔记

    Mysql实战45讲 极客时间 读书笔记 Mysql实战45讲 极客时间 读书笔记 笔记体会: 根据加锁范围:MySQL里面的锁可以分为:全局锁.表级锁.行级锁 一.全局锁:对整个数据库实例加锁.My ...

随机推荐

  1. Java中遍历HashMap方式

    本教程将为你展示Java中HashMap的几种典型遍历方式. 如果你使用Java8,由于该版本JDK支持lambda表达式,可以采用第5种方式来遍历. 如果你想使用泛型,可以参考方法3.如果你使用旧版 ...

  2. 关系型数据库（七），复杂SQL语句

    目录 1.SQL语句由六部分组成 2.Group By 和HAVING 七.复杂SQL语句 1.SQL语句由六部分组成 Select  *** From  *** Where  *** Group B ...

  3. k8s删除节点后再重新添加进去（踩坑）

    开启本地集群,发现一台节点出问题了,想删除再换一台节点,结果就踩坑了,还好本地有好几套环境. 再master节点执行以下命令 [root@k8s-master ~]# kubectl drain k8 ...

  4. Linux命令-磁盘管理(一)

    Linux命令-磁盘管理(一) Linux cd命令 Linux cd命令用于切换当前工作目录至 dirName(目录参数). 其中 dirName 表示法可为绝对路径或相对路径.若目录名称省略,则变 ...

  5. ORA-01440:要减小精度和标准，则要修改的列必须为空

    修改字段的精度时,提示“ ORA-01440:要减小精度和标准,则要修改的列必须为空 ” 解决方法:将该表中的数据全部删除即可

  6. Ubuntu18.04安装rabbitvcs svn图形化客户端和简单实用

    1.1  自带source源里面查找rabbitvcs信息 sudo apt search rabbitvcs 1.2  安装rabbitvcs sudo apt install rabbitvcs- ...

  7. 分布式-信息方式-ActiveMQ的集群

    ActiveMQ的集群Queue consumer clusters              ActiveMQ支持 Consumer对消息高可靠性的负载平衡消费,如果一个 Consumer死掉,该消 ...

  8. js手写笔记

    1.document.write(); 2.document.getElementById("").style.color="red";//sytle.font ...

  9. spring框架中AOP思想与各种配置详解

    Spring中提供两种AOP支持:   1.基于代理的经典AOP   2.Aspectj注解配置AOP    首先我们先了解什么是AOP,AOP(Aspect Oriented Programming ...

  10. javaInt占几个字节

    javaInt占几个字节 一个字节等于8位:1 byte = 8 bit. 在java中的中文和英文字母都是采用Unicode编码来表示的,一个Unicode编码为16位,1个字节是8位,所以1个Un ...