Vue学习之vue中的v-if,v-show,v-for

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

原文地址:https://www.cnblogs.com/twodoge/p/10230143.html

时间: 2024-11-08 08:03:42

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

vue学习(八) vue中样式 class 定义引用

//style<style> .red{ color:red; } .thin{//字体粗细 font-weight:200 } .italic{//字体倾斜 font-style:italic } .active{//字符间距 letter-spacing: 0.5em }</style>//html <div id="app"> //传统方式 <h1 class="red thin" >红红火火</>

Vue学习之vue属性绑定和双向数据绑定

··· <!DOCTYPE html> vue <!-- vue中的属性绑定和双向数据绑定 属性绑定: v-bind:title="title" 或 :title="title" 双向数据绑定: v-model --> <div id="root"> <div :title="title">hi man</div> <input v-model="co

记Vue学习经历-------Vue未定义及无反应

今天开始接触Vue,并且随手敲代码查看效果 刚兴致勃勃的上手,就碰见了个很纠结的问题,Vue貌似并没有加载成功 下面是代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 </head> 7 <script src="https://cdn.

12.VUE学习之-循环li,if判断示例讲解class中应用表达式

功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&quo

Vue学习之路---No.2(分享心得,欢迎批评指正)

昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2.了解Vue的特色功能-------"双向绑定" 3.了解Vue的基础语法-------"{{bigSurprise}},el:'',data{},vm.project,method{},等 首先,昨天我们提到了很好用的双向绑定,但是如果在某些情况下我们不需要双向绑定应该怎么办呢,

Vue学习总结

1.vue是什么 vue: 渐进式的js框架(先看到做核心的东西,然后再根据需求进行增加,比较灵活) 自底向下(先关注最基础的部分,接着逐渐扩大) 只关注视图层 组件化 响应式设计(响应式:一个网页,根据分辨率的不同,改变网页大小,例如bootstrap就是响应式的,适应式:多个不同的网页,根据分辨率的不同自动选择不同的页面) 2.优缺点 优点:简单              轻量              组件解耦                 超快虚拟dom 缺点: 出现晚(2014)不支

Vue学习【第一篇】:Vue初识与指令

什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量到页面一块内容到整个页面,最终大到整个项目,东可以用vue框架来实现 vue可以干哪些事 将数据渲染到指定区域(数据可以是后台获取,也可以由前台自己产生) 可以与页面完成基于数据的交互方式 为什么学习Vue 1.整合了Angular React框架的优点(第一手API文档是中文的) 2.单页面应用(

vue学习(1) vue-cli 项目搭建

vue学习(1)  vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 下载完成后点击安装包安装到自己指定的文件夹 windows + r 打开cmd,在命令行中输入node -v,如果安装成功就可以看到当前node的版本 输入npm -v,可以看到相应的npm的版本 3. 安装vue-cli npm install -g cli 4. 创建cli项目 首先cd进入到你

vue学习指南:第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性