<!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>

    <script src="vue.js"></script>

</head>

<body>

    <!-- vue中的v-if,v-show,v-for

        v-if：

        v-show:display:none/block

        v-for:

     -->

    <div id="root">

        <div v-if="show">hello dog</div>

        <button @click="handleClick">toggle</button>

        <ul>

            <li v-for="(item, index) of list" :key="index">{{item}}</li>

        </ul>

    </div>

    <script>

        new Vue({

            el:"#root",

            data:{

                show: true,

                list: [1,2,3]

            },

            methods: {

                handleClick: function() {

                    this.show = !this.show

                }

            }

        })

    </script>

</body>

</html>

Vue学习之vue中的v-if,v-show,v-for的更多相关文章

  1. Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  2. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  3. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  4. Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  5. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  6. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  7. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  8. Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  9. Vue学习之--------Vue中收集表单数据（使用v-model 实现双向数据绑定、代码实现）（2022/7/18）

    文章目录 1.Vue中实现表单数据的收集 1.1 基础知识 1.2 代码实例 1.3 测试效果 1.4 额外插一嘴 1.Vue中实现表单数据的收集 1.1 基础知识 表单中常用的标签:input(输入 ...

  10. Vue学习之webpack中使用vue(十七）

    一.包的查找规则: 1.在项目根目录中找有没有 node_modules 的文件夹: 2.在 node_modules 中根据包名,找对应的vue 文件夹: 3.在vue 文件夹中,找 一个叫做 pa ...

随机推荐

  1. str类型转json,str类型转list

    python str类型与json格式转换或者list格式转换 str转list: import ast #####方法一##### datas = '{"carname":&qu ...

  2. Linux CentOS7 下设置tomcat 开机自启动

    网上有很多教程说是可以设置Tomcat 自启动,但是一一验证了都不行.最后找到一个方法 验证可以: 1.改rc.local   位于/etc/rc.d/文件下的rc.local   vi /etc/r ...

  3. CSS 之Grid网格大致知识梳理1

    CSS所提供的关于网格Grid属性让我们可以更方便编写页面以及布局,而它的一些主要应用属性如下: 1.将父容器的display属性值设置为grid 即可将其转换为网格容器: 2.在网格容器中添加列的属 ...

  4. 在 Web 级集群中动态调整 Pod 资源限制

    作者阿里云容器平台技术专家 王程阿里云容器平台技术专家 张晓宇(衷源) ## 引子 不知道大家有没有过这样的经历,当我们拥有了一套 Kubernetes 集群,然后开始部署应用的时候,我们应该给容器分 ...

  5. HDU 2516

    题意略. 思路: 典型的斐波那契博弈,这里说一下结论: 如果先手面对的n不是斐波那契数,那么先手必胜:否则后手胜. 详见代码: #include<bits/stdc++.h> using ...

  6. C 扩展对闭包特性的支持

    今日听说某君批评 C 语言说它[输入一个参数返回一个函数]很困难. 例如在 Python 中,你可以 def addn(n): def addx(x): return n + x return add ...

  7. c#搭建jenkins自动构建环境

    这边我使用的是参数化构建过程,文笔比较差劲,就直接上干货了 1.定义构造参数 2.设置jenkins工作空间目录,在此定义了版本号和工作目录构建参数 3.配置svn 4.构建触发器,用于轮询查看svn ...

  8. P3225 [HNOI2012]矿场搭建 割点 tarjan 双联通分量

    https://www.luogu.org/problemnew/show/P3225 题意 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条 ...

  9. SDU暑期集训排位（5）

    SDU暑期集训排位(5) A. You're in the Army Now 题意 类似选志愿.每个人有 mark,有优先级从高到低的志愿. 做法 定睛一看,鲨鼻题.然后 WA. 为什么会 WA 呢? ...

  10. CF1005D Polycarp and Div 3 思维

    Polycarp and Div 3 time limit per test 3 seconds memory limit per test 256 megabytes input standard ...