第一个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. node的安装和配置教程

    node,除了做数据服务处理,还是各大框架的环境依赖,作为前端开发人员,node是必不可少的.好了,接下来直接开始. 一.根据自己的安装环境(即你的电脑系统版本)下载对应安装包,官网地址:https: ...

  2. DES加密 DESEncrypt

    /// <summary> /// DES加密/解密类. /// </summary> public class DESEncrypt { public DESEncrypt( ...

  3. Python web框架 Tornado异步非阻塞

    Python web框架 Tornado异步非阻塞   异步非阻塞 阻塞式:(适用于所有框架,Django,Flask,Tornado,Bottle) 一个请求到来未处理完成,后续一直等待 解决方案: ...

  4. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  5. 使用oracle数据库的开发流程

  6. Spark学习（一）——Spark运行架构

    基本概念 在具体讲解Spark运行架构之前,需要先了解几个重要的概念: RDD:是弹性分布式数据集(Resilient Distributed Dataset)的简称,是分布式内存的一个抽象概念,提供 ...

  7. 二、linux下apache2.2.11+php5.6.3的环境配置

    参考文献:http://www.92csz.com/study/linux/16.htm 本节部分操作会直接使用上一节(http://www.cnblogs.com/yxpblog/p/4627509 ...

  8. es6 的数组的方法

    es6 数组的拓展 数组的类 Array 数组的定义: 1. var arr=[]; 2. var arr=new Array(3) // 3 代表有三个元素 arr[0]=12; arr[1]=24 ...

  9. layui学习地址

    --layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html

  10. flutter tabbar创建与显示

    效果图 main.dart import 'package:flutter/material.dart'; import 'pages/index_page.dart'; void main() =& ...