当前位置: 首页 > news >正文

Vue中常用的指令

  1. v-bind
    【单向数据绑定】
    【格式:v-bind:属性名=“data中定义的属性”】
    【简写::属性名=“data中定义的属性”】

    <div id="root">
    	<a href="http://www.baidu.com">跳转百度</a> // 普通字符串赋值
    	<a v-bind:href="url">跳转到百度页面1</a> // 标准写法
    	<a :href="url">跳转到百度页面2</a>  // 简写
    </div>	
    
    new Vue({
    	el: '#root',
    	data: function () {
    		return {
    			url: 'http://www.baidu.com'
    		}
    	}
    });
    
  2. v-model
    【双向数据绑定,一般用于表单元素上】
    【格式:v-model:value=“data中定义的属性”】
    【简写:v-model=“data中定义的属性”】

    <div id="root">
    	<input type="text" value="字符串"/>  普通字符串赋值(文本框中的默认值)
    	<input type="text" v-model:value="username"/> // 标准写法
    	<input type="text" v-model="username"/> // 简写
    </div>	
    
    new Vue({
    	el: '#root',
    	data: function () {
    		return {
    			username: 'wuwu'
    		}
    	}
    });
    
  3. v-on
    【绑定事件处理函数】
    【格式:v-on:事件类型=“事件处理函数”】
    【简写:@事件类型=“事件处理函数”】

    <div id="root">
    	<button onclick="show()">点击</button>   // 原生js绑定事件方式
    	<button v-on:click="show">点击</button> // 标准写法,无参数可以不写()
    	<button @click="show">点击</button> // 简写
    </div>
    
    new Vue({
    	el: '#root',
    	data: function () {
    		return {
    			count: 1
    		}
    	},
    	methods: {
    		show() {
    			console.log(this.count);
    		}
    	}
    });
    
  4. v-if、v-else-if、v-else
    【创建和删除一个元素】
    【与js中的if、else if、else逻辑相同,三者搭配使用时,需要紧挨在一起,中间不能被其他元素分割】
    【格式:v-if=“属性或表达式”、v-else-if=“属性或表达式”、v-else】

    <div id="root">
    	<p v-if="5 < 1">这是一段文字1</p>  // 不成立
    	<p v-else-if="5 < 6">这是一段文字2</p> // 成立
    	<p v-else>上方都不成立时,显示此节点</p> // 上方代码成立,此行不会被执行
    </div>
    
  5. v-show
    【显示和隐藏一个元素】
    【底层是通过display属性实现的,节点存在于页面中,只是被隐藏了】
    【格式:v-show=“属性或表达式”】

    <div id="root">
    	<p v-show="true">这是一段文字</p> // 显示
    	<p v-show="5 < 1">这是一段文字</p> // 隐藏
    	<p v-show="isShow">这是一段文字</p> // 显示
    </div>
    
    new Vue({
    	el: '#root',
    	data: function () {
    		return {
    			isShow: true
    		}
    	}
    });
    
  6. v-for
    【遍历数组、对象、字符串(比较少用)、次数(比较少用)】
    【格式:v-for="(item, index) in arr; :key=“唯一值”】

    <div id="root">
    	<!-- 遍历数组 -->
    	<ul>
    		<li v-for="item in arrList" :key="item.id">
    			{{item.id}}---{{item.name}}---{{item.age}}
    		</li>
    	</ul>
    	<!-- 遍历对象 -->
    	<ol>
    		<li v-for="(value, key) in objs" :key="key">
    			{{key}}---{{value}}
    		</li>
    	</ol>
    	<!-- 遍历字符串 -->
    	<p>
    		<span v-for="(item, index) in str" :key="index">
    			{{index}}---{{item}}
    		</span>
    	</p>
    	<!-- 遍历次数 -->
    	<p>
    		<span v-for="(item, index) in 5" :key="index">
    			{{index}}---{{item}}
    		</span>
    	</p>
    </div>
    
    new Vue({
    	el: "#root",
    	data: function () {
    		return {
    			arrList: [{
    				id: 1,
    				name: 'wuwu',
    				age: 18
    			}, {
    				id: 2,
    				name: 'tt',
    				age: 19
    			}],
    			objs: {
    				name: 'wuwu',
    				age: 18,
    				study: 'vue'
    			},
    			str: 'hello World'
    		}
    	}
    });
    

相关文章:

  • CycloneDDS配置详细说明中文版(四)
  • 软件定义汽车的关键—车载操作系统
  • Docker consul的容器服务更新与发现
  • 【第七章 MySQL体系结构、存储引擎、InnoDB、MyISAM、Memory、存储引擎特点及选择】
  • 【Transformer】Transformer理论知识
  • Eyeshot 2023 预期计划 Eyeshot 2023 即将见面
  • 数据结构的各种排序
  • 游戏开发36课 cocoscreator scrollview优化
  • 【Python自然语言处理】文本向量化的六种常见模型讲解(独热编码、词袋模型、词频-逆文档频率模型、N元模型、单词-向量模型、文档-向量模型)
  • G1D30-NLP(Tokenizer)DP(交叠子问题)
  • 513.找树左下角的值
  • Java 实例:删除字符串中的一个字符和字符串替换
  • Elasticsearch面试题
  • PCB入门介绍与电阻电容电感类元件的创建
  • CesiumForUnreal之UE世界坐标与WGS84经纬度坐标转换原理与应用
  • JUC并发编程与源码分析笔记06-Java内存模型之JMM
  • Metabase学习教程:系统管理-4
  • Liunx进程间信号
  • ShardingSphere介绍
  • 【ceph】分布式存储ceph
  • Spring Boot使用宝兰德BES进行改造和部署
  • 分享一个你很可能不知道的Java异常实现的缺陷
  • 六 游戏基础知识和SHAPE
  • 【传输层】概述、复用分用、UDP详解、UDP校验
  • Redis基础学习
  • [附源码]Python计算机毕业设计Django学生宿舍管理系统
  • 51单片机——IO拓展(串转并)-74HC595 小白详解
  • 电力系统潮流计算(牛顿-拉夫逊法、高斯-赛德尔法、快速解耦法)(Matlab代码实现)
  • Apache服务深入学习篇(详细介绍)
  • ICV:2022年中国车载摄像头市场规模有望突破50亿美元大关
  • 湖南2021本科批(普通类历史类)第一次征集志愿投档分数线
  • 2022年甘肃高考482分能报什么大学 482分能上哪些院校
  • 2022年全国各大高校在山东招生计划及分数
  • 浙江有哪些师范大学,年浙江师范类大学分数线排名一览表
  • 武汉设计工程学院是几本
  • 2022感恩节放假吗 中国有哪些节日会放假
  • 12种新高考3+1+2选科组合分析 怎么选科好
  • 0基础艺考最容易过的专业有哪些 通过率最高的专业是什么
  • 体育高水平怎么报名
  • 浙江2022普通类第二段平行投档分数线是多少