vue常用指令
1、v-if系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.box{
width:100px;
height:100px;
background: red;
}
.box2{
width:100px;
height:100px;
background: yellow;
}
.box3{
width:100px;
height:100px;
background: green;
}
</style>
</head>
<body>
<div id="app">
<span>隔山打牛</span>
<div class="box" v-if="onOff == 'a'"></div>
<div class="box2" v-else-if="onOff == 'b'"></div>
<div class="box3" v-else></div>
</div>
<script>
new Vue({
el:'#app',
data:{
onOff:'b'
}
});
</script>
</body>
</html>
v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景
2、v-show
根据表达式之真假值，切换元素的 display CSS 属性
<div id="app">
<div v-show="islo">你好，vue</div>
</div>
new Vue({
el:'#app',
data:{
islo:true
}
})
上面例子中如果islo为false则display属性为none 隐藏元素
3、v-for
该指令根据遍历数组来进行渲染
/*
一个参数：<div v-for="val in obj">{{val}}</div>
两个参数：<div v-for="(val,key)" in obj>{{val}}</div>
三个参数：<div v-for="(val,key,index)" in obj>{{val}}</div>
*/
注意：
当v-for 和 v-if同处于一个节点时候，v-for比v-if优先级高
意味着v-if将运行在每个v-for中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="val in items">{{val}}</li>
</ul>
<ol>
<li v-for="(user,key) in itemObj">{{user.name}}</li>
</ol>
<div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div>
</div>
<script>
/*
val:数组中的每个值，对象每个值
key:数据就下标，对象key值
index:下标0,1,2
*/
new Vue({
el:'#app',
data:{
items:['苹果','橘子','香蕉','草莓','柚子'],
itemObj:[
{name:'apple'},
{name:'orange'},
{name:'banana'},
{name:'strawberry'},
{name:'pomelo'},
],
obj:{
id:1,
name:'小明',
age:22,
home:'太原'
}
} });
</script>
</body>
</html>
4、v-text和v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
<p v-text="msg"></p>
<p v-html="str"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好，世界',
str:'<h2>内容</h2>'//这里使用v-html，v-text会把<h2>标签也输出来
}
});
</script>
</body>
</html>
5、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style> </style>
</head>
<body>
<div id="app">
<button @click="add">添加</button>
<button @click="rm">删除</button>
<ul>
<li v-for="(val,key) in arr">{{val}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
num:0,
arr:[]
},
methods:{
add(){
this.arr.unshift(++this.num)
},
rm(){
if(this.num>0){
this.arr.shift();
this.num --;
}
}
}
});
</script>
</body>
</html>
v-on修饰符
stop
//调用 event.stopPropagation()
prevent
//调用 event.preventDefault()
self
//只当事件是从侦听器绑定的元素本身触发时才触发回调
<div id="app">
<div id="box1" @click="b1">
<!--stop阻止冒泡，prevent阻止默认行为-->
<div id="box2" @click.stop.prevent="b2">
12345
</div>
</div>
</div>
new Vue({
el:'#app',
methods:{
b1(){alert(1);},
b2(){ alert(2);}
}
});
6、v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.classA{
color:red;
}
.classB{
color:orange;
}
</style>
</head>
<body>
<div id="app">
<div :class="classA">绑定class</div>
<div :class="{classA:isok}">绑定class的判断</div>
<div :class="{classA,classB}">绑定class中数组</div>
<div :class="isok?classA:classB">绑定class的三元运算符</div>
<div>
<input type="checkbox" id="isok" v-model="isok">
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
classA:'classA',
classB:'classB',
isok:true
}, });
</script>
</body>
</html>
7、v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.min.js"></script>
<style>
.active{
background: red;
}
</style>
</head>
<body>
<div id="app">
小黄<input type="checkbox" value="小黄" v-model="arr">
小蓝<input type="checkbox" value="小蓝" v-model="arr">
小绿<input type="checkbox" value="小绿" v-model="arr">
{{arr}}
</div>
<script>
new Vue({
el:'#app',
data:{
arr:[]
}, });
</script>
</body>
</html>
在select上绑定v-model，如果option中有value,选择的结果优先为value值
如果没有value值，则走option的内容
<div id="app">
<select name="" v-model="b">
<option disabled value="">请选择</option>
<option value="aa">广州</option>
<option value="bb">杭州</option>
<option value="cc">福州</option>
<option value="dd">苏州</option>
<option value="ee">徐州</option>
<option value="ff">兖州</option>
</select>
<!--下面会直接出现城市名称，因为没有value值-->
<select name="" v-model="b">
<option disabled value="">请选择</option>
<option >广州</option>
<option >杭州</option>
<option >福州</option>
<option >苏州</option>
<option >徐州</option>
<option >兖州</option>
</select>
{{b}}
</div>
8、v-once
<span v-once>change:{{msg}}</span><div v-once><h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component><ul>
<li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染
9、v-pre
<div id="app">
<!--第一条语句不进行编译-->
<span v-pre>{{message}}</span>
<span>{{message}}</span>
</div>
最终仅显示第二个span的内容
10、 v-cloak
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
在页面加载时会闪烁，先显示
<div>
{{message}}
</div>
然后再显示
<div>
hello world!
</div>
vue常用指令的更多相关文章
- vue学习（二）Vue常用指令
2 Vue常用指令 1. vue的使用要从创建Vue对象开始 var vm = new Vue(); 2. 创建vue对象的时候,需要传递参数,是json对象,json对象对象必须至少有两个属性成员 ...
- 【Vue常用指令】
目录 v-html v-text v-for v-if v-show v-bind v-on v-model 指令修饰符 计算与侦听属性 自定义属性 获取DOM元素 "@ *** Vue.j ...
- 重学VUE——vue 常用指令有哪些？
一.什么是指令? 在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性.指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上.只有v-for是一个类 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- VUE常用指令总结！
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue常用指令总结
一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况).指令的职责是,当表达式的值改变 ...
- Vue常用指令详解分析
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- Vue常用语法及命令
1,Vue常用语法 vue常用语法之变量的定义 // 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log ...
随机推荐
- MS-DOS 系统汇编环境之DOSBOX+vim
经过虚拟机的体验,我发现还是dosbox里汇编比较方便..... 一.下载安装 dosbox DOSBOX 准备好 masm.exe.link.exe.debug.exe,放在~/dos下(文件夹名字 ...
- Linux服务器定时健康检查，发生故障自动微信告警
此脚本适用于于各种Linux环境,可以实现各种监控项目,可自定义阀值,实现不同监控效果已在原有脚本基础上做了简化,提取了主要功能目前实现的有:1.磁盘监控2.内存监控3.cpu负荷监控4.进程数监控5 ...
- spring cloud + mybatis 分布式 微服务 b2b2c 多商户商城 全球部署方案
用java实施的电子商务平台太少了,使用spring cloud技术构建的b2b2c电子商务平台更少,大型企业分布式互联网电子商务平台,推出PC+微信+APP+云服务的云商平台系统,其中包括B2B.B ...
- Apache rewrite地址重写
Apache-rewrite+13个经典案例Apache 重写规则的常见应用(rewrite)一:目的 如何用Apache重写规则来解决一些常见的URL重写方法的问题,通过常见的 实例给用户一些使用重 ...
- 小电阻之大作用——CAN终端电阻
CAN总线终端电阻,顾名思义就是加在总线末端的电阻.此电阻虽小,但在CAN总线通信中却有十分重要的作用. 终端电阻的作用 CAN总线终端电阻的作用有两个: 1.提高抗干扰能力,确保总线快速进入隐性状态 ...
- poj 3666 Making the Grade(离散化+dp)
Description A straight dirt road connects two fields on FJ's farm, but it changes elevation more tha ...
- OnCheckedChangeListener和setChecked之间冲突问题解决
判断是否点击!buttonView.isPressed()来解决 CompoundButton.OnCheckedChangeListener checkedChangeListener = new ...
- 牛客网NOIP赛前集训营-提高组（第一场）
牛客的这场比赛感觉真心不错!! 打得还是很过瘾的.水平也比较适合. T1:中位数: 题目描述 小N得到了一个非常神奇的序列A.这个序列长度为N,下标从1开始.A的一个子区间对应一个序列,可以由数对[l ...
- A1014. Waiting in Line
Suppose a bank has N windows open for service. There is a yellow line in front of the windows which ...
- 解决MySQL5.7密码重置问题
前言:最近活动,买了台服务器,环境什么的都弄完了,MySQL是安装的5.7的版本,连接进入的时候出现了下面的错误 这其实是MySQL5.7的一个安全机制,需要你重新设置密码. set password ...