Vue（三）常用指令
<script>
window.onload=function(){
new Vue({
// el:'.itany',
el:'div', //vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的
data:{
name:'', //即使没有值，也不能省略，报错
age:21,
flag:true,
nums:[12,4,23,5],
user:{id:9527,name:'唐伯虎'}
}
});
}
</script>
<script>
window.onload=function(){
new Vue({
el:'#itany',
data:{
arr:[12,4,5,34,2,11],
user:{id:9527,name:'唐伯虎',age:25},
arr2:[12,4,5,34,2,11,12],
users:[
{id:9527,name:'唐伯虎',age:25},
{id:1001,name:'秋香',age:22},
{id:1002,name:'石榴姐',age:24}
]
}
});
}
</script>
<body>
<div id="itany">
<!-- {{arr}} --> <ul>
<!-- 普通循环 -->
<!-- <li v-for="value in arr">{{value}}</li> -->
<!-- <li v-for="value in user">{{value}}</li> --> <!-- 键值循环 -->
<!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->
<!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> --> <!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by -->
<!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> --> <li v-for="(user,index) in users">
{{index+1}},{{user.id}},{{user.name}},{{user.age}}
</li>
</ul>
</div>
</body>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{ //存储数据
arr:[12,34,45,23,5]
},
methods:{ //存储方法
show:function(){
console.log('show方法');
},
add(){
// console.log(this); //this表示当前vue实例
// console.log(this===vm); //true
this.arr.push(666); //使用this访问当前实例中的成员
// this.show();
}
}
});
}
</script>
<body>
<div id="itany">
<!-- <button onclick="show()">点我</button> -->
<button v-on:click="show">点我</button>
<button v-on:click="add()">向数组中添加一个元素</button>
<br>
{{arr}}
<hr> <button v-on:mouseover="show">鼠标经过</button>
<button v-on:dblclick="show">鼠标双击</button>
</div>
</body>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
flag:true
},
methods:{
change(){
this.flag=!this.flag;
}
}
});
}
</script>
<body>
<div id="itany">
<!-- <button v-on:click="change">隐藏</button> -->
<button v-on:click="flag=!flag">隐藏</button> <hr>
<div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>
</div>
</body>
Vue（三）常用指令的更多相关文章
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
- 新人成长之入门Vue.js常用指令介绍（一）
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribu ...
- vue入门-常用指令操作
指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...
- Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- Vue.js常用指令：v-show和v-if
一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...
- Vue.js常用指令：v-bind
一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...
随机推荐
- Java基础知识➣泛型整理（四）
概述 泛型的本质是参数化类型,使用同一套代码来满足不同数据类型的业务需要,提高代码的执行效率,使代码简单明了. 泛型方法 该方法在调用时可以接收不同类型的参数.根据传递给泛型方法的参数类型,编译器适当 ...
- Docker技术底层架构剖析
[Docker 底层技术] docker底层的 2 个核心技术分别是 Namespaces 和 Control groups 在操作系统中,网络配置,进程,用户,IPC(进程之间的调用)等信息之间的 ...
- crc循环冗余检验
CRC(Cyclic Redundancy Check):循环冗余检验.在链路层被广泛使用的检错技术. CRC原理: 1.发送端 1.1.在发送端先将数据分组,每组k个数据.假定要传送的数据是M. 1 ...
- Hbase原理| 优化
GFS -->hdfsmapreduce --->hadoop mrbigtable-->hbase HBase是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统 海量存储:列式 ...
- 初窥Java之二
一.java中存在三大注释: 第一大注释: 单行注释 一般用于信息量比较少的地方 第二大注释: 多行注释 一般用于信息比较多的地方 多行注释注意事项:1.多行注释的开始行与结尾行不能写注释 ...
- The path is not a valid path to the xxx kernel header
在安装vmtools时无意中出现了这样的问题 1.gcc错误 Searching for GCC- The path "" is not valid path to the gcc ...
- 牛客练习赛 26 C题 城市规划【贪心】
<题目链接> 题目描述 小a的国家里有n个城市,其中第i和第i - 1个城市之间有无向道路连接,特殊的,第1个城市仅与第2个城市相连为了减轻道路维护负担,城市规划局局长MXT给出了m个要求 ...
- 003.MySQL高可用主从复制新增slave
一 基础环境 主机名 系统版本 MySQL版本 主机IP master CentOS 6.8 MySQL 5.6 172.24.8.10 slave01 CentOS 6.8 MySQL 5.6 17 ...
- spring注解工具类AnnotatedElementUtils和AnnotationUtils
一.前言 spring为开发人员提供了两个搜索注解的工具类,分别是AnnotatedElementUtils和AnnotationUtils.在使用的时候,总是傻傻分不清,什么情况下使用哪一个.于是我 ...
- linux学习笔记 4建立用户
一般用法 #useradd mysql 含义 创建 mysql用户 特殊用法 1> #useradd -d /usr/cjh -m cjh 含义:创建cjh用户 产生一个主目录 /usr/cj ...