第一个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. CSS的 背景属性

    ㈠背景色  background-color ⑴background-color 属性设置元素的背景颜色. ⑵元素背景的范围: background-color 属性为元素设置一种纯色.这种颜色会填充 ...

  2. Maven 在 pom.xml 文件中配置 repositories 仓库

    如果你希望在你的项目中使用独立的 repositories . 例如,你希望配置使用自己的 https://maven.ossez.com/repository/internal 作为仓库. 例如,修 ...

  3. cp：复制文件和目录

    cp 命令,主要用来复制文件和目录,同时借助某些选项,还可以实现复制整个目录,以及比对两文件的新旧而予以升级等功能. cp 命令的基本格式如下:cp [选项] 源文件 目标目录/文件 选项: -a:相 ...

  4. 智能指针之shared_ptr基本概述

    1.shared_ptr允许有多个指针指向同一个对象,unique_ptr独占所指向的对象. 2.类似于vector,智能指针也是模板.创建智能指针: shared_ptr<string> ...

  5. Housewife Wind

    Housewife Wind 参考博客:POJ2763 Housewife Wind(树剖+线段树) 差不多是直接套线段树+树剖的板子,但是也有一些需要注意的地方 建树: void build() { ...

  6. 作业要求20191010-4 alpha week 1/2 Scrum立会报告+燃尽图 02

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8747 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  7. java高级面试题汇总（复习）从最基础的往上复习，每天定期更新。

    每天搬一点砖,总有一天成为大牛! 看问题的时候请不要立马去翻答案,多想想. 看完答案可以问问为什么,尝试拓展!一起加油吧! 每个答案后面都有一个小彩蛋(一个以上的拓展问题),钻研让你先人一步. jav ...

  8. 清北学堂2019.8.10 & 清北学堂2019.8.11 & 清北学堂2019.8.12

    Day 5 杨思祺(YOUSIKI) 今天的难度逐渐上升,我也没做什么笔记 开始口胡正解 今天的主要内容是最小生成树,树上倍增和树链剖分 最小生成树 Prim 将所有点分为两个集合,已经和点 1 连通 ...

  9. leetcode886可能的二分法

    class Solution { public: bool possibleBipartition(int N, vector<vector<int>>& dislik ...

  10. netfilter/iptables 防火墙

    目录 文章目录 目录 iptables 与 netfilter 工作机制 规则(Rules) 链(chain) 表(tables) 网络数据包通过 iptables 的过程 总结链.表和规则的关系 i ...