vuejs中有没有指令

v-else指令

v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容

			男士
			女士
		
		var vm = new Vue({
			el: '#app',
			data: {
				isMale:true
			}
		})

v-for指令

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in list"
list是一个数组，item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始

			
					
					
					
					
				
			

				
序号
					
姓名
					
年龄
				
				
		
		
var vm = new Vue({
			el: '#app',
			data: {
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			}
		})

v-bind指令

v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），如v-bind: class

class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名

			
		
		
		var vm = new Vue({
			el: '#app',
			data: {
				img:'https://www.baidu.com/img/bd_logo1.png',
				isLogo:false,
				hasBorder:true
			}
		})

以上v-bind:src也可简写成:src,修改上面代码

v-on指令

v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件

同样，和v-bind一样，v-on也可以使用简写，用@符号代替，修改代码：

我们来看个例子：

以下是一个点击隐藏和显示p文本段落的代码

			微风轻轻的吹来，带来了一丝丝凉意

			

				显示

隐藏 var vm = new Vue({ el: '#app', data: { isShow:true }, methods:{ show:function(type){ if(type){ this.isShow = true; }else{ this.isShow = false; } } } })

综合示例

			添加新用户
			
				姓名：

				年龄：

				添加
			
			
					
					
					
					
					

				
序号
					
姓名
					
年龄
					
操作
				
				

						删除
						=25" href="javascript:;" @click="marry(index)">可以结婚了
					
				
			
		
		new Vue({
			el: '#app',
			data: {
				person:{
					name:'',
					age:'',
				},
				list:[{
					name:'章三',
					age:18
				},{
					name:'李四',
					age:23
				}]
			},
			methods:{
				add:function(){
					this.list.push(this.person);
					this.person = {name:'',age:''};
				},
				deleteItem:function(index){
					// 删除一个数组元素
					this.list.splice(index,1);
				},
				marry:function(){
					alert("不好意思，你没有女朋友结不了婚");
				}
			},
			created:function(){
			}
		})

以上是“vuejs中有没有指令”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

行业新闻 建站学堂 常见问题

联系我们

公司地址 人才招聘

成都 达州



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：达州市南岸区弹子石腾龙大道58号2栋21-6

友情链接： LED亮化工程   IOS开发   香港云服务器租用   艾瑞格衣柜   广安网站制作公司   免费收录网站   云虚拟主机   LOGO设计   网站seo优化   犀浦雨棚定制   

版权所有：青羊区大橙子信息咨询工作室 蜀ICP备2022028542号-14