学习vue的第二天 v-bind的进阶用法

最新推荐文章于 2024-04-30 23:00:09 发布
最新推荐文章于 2024-04-30 23:00:09 发布
阅读量243 收藏
点赞数 1
文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34176561/article/details/124867557
版权
本文详细介绍了Vue.js中的v-bind进阶用法，包括v-bind:style用于动态设置元素样式，v-bind:key用于优化列表渲染，v-bind:class实现动态增删class。通过实例展示了如何使用v-bind与v-for结合实现tab切换功能，并讲解了如何通过函数对象和@click事件改变元素样式。同时，还探讨了v-bind:style直接赋值和调用函数动态设置行内样式的方法。
摘要由CSDN通过智能技术生成

今天学习了vue中的v-bind进阶用法

v-bind:style

v-bind:key

v-bind:class

代码展示的是通过 :class给标签动态加入或删除class名

接着是给按钮添加取反方法和封装一个函数对象

按钮修改上方span标签的颜色，黑黄切换

v-bind 和 v-for结合可以做很多实质性的功能，比如tab切换，

下方是实现从citys中遍历对象到页面中，之后用@click给点中的元素添加样式来实现变色

指令的值不仅可以直接写数据，比如：<h3 :style="{fontSize:'50px'}">{ {msg}}</h3>

还可以通过调用函数来实现：

methods:{
	getClass(){
		return [this.hover1,this.hover2]
	},
	changeClass(){
		this.hovered = !this.hovered
	},
	change(index){
		this.contenIndex = index
	},
	getStyle(){
		return [this.baseStyle]
	}
}

最底下就是用v-bind:style给标签加行内样式，这个不常用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.hover{
				color: yellow;
				/* font-si
最低0.47元/天 解锁文章
veinYutc
关注
v-bind在高阶组件的使用
weixin_46692678的博客
07-04 583
《v-bind》 通常情况下，我们都是都是直接使用 v-bind:value=“value” 或者 :value=“value”，这种写法没有问题。 就好比下面的写法 <template> <your-component :name="name" :sex="sex" :age="age" :address="address" /> </template> <script> export default { data(){ re
vue ---v-bind 高级用法
weixin_44868492的博客
09-11 134
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
v-bind的高级用法
u014788505的博客
08-24 286
//用于父子组件传参 //比如：item = { "placeholder": "12", "label": [], "name": ''} <component v-bind="item" /> //子标签在接收的时候 整体直接props //比如接收上面的数据： props: { placeholder: { type: String, def...
[vue] v-bind使用技巧
weixin_36210698的博客
07-11 601
v-bind使用技巧 属性值不为真时，不会将属性绑定到元素上 <template> <div id="app"> <div class="box" :data-a="null" :data-b="undefined" :data-c="false"> </div> </div> </template> ...
进阶vue面试题总结
bb_xiaxia1998的博客
10-19 727
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;（1）自定义指令基本内容钩子函数：指令定义对象提供钩子函数。
30天从Vue入门到精通教程
08-10
【第二阶段：Vue进阶特性】 5. **Vuex状态管理**：在大型项目中，数据管理变得复杂。Vuex是Vue生态中的状态管理库，学习如何使用Vuex管理组件间共享状态，以及actions、mutations和getters的使用。 6. **路由管理*...
【学习笔记】前端（I）—— Vue2（Ⅰ）
最新发布
Eddie_hyh的博客
04-30 845
前端第一部分：Vue（Ⅰ）
Threejs进阶之八：使用Sky和Water创建蓝天大海
九仞山的专栏
04-23 1923
通过Threejs提供的Sky和Water类创建一个海天一色的场景，通过修改water.material.uniforms[ 'time' ].value是水产生流动效果，加载gltf模型并利用Math的正弦函数使其产生上下浮动的效果
VueJS之v-bind:key爬坑
热门推荐
u011248929的博客
05-31 1万+
Vue 中应如何合理使用key值 在开发中经常会碰到使用 v-for的用法,例如现有数组 var array=[{name:’张三’,age:21},{name:’李四’,age:39},{name:’王五’,age:40}]; 使用列表对此数据渲染如下 &lt;ul&gt; &lt;li v-for="person in array" :key="Math.random()" &gt...
Vue指令中 v-bind 的5种用法
eyes++的博客
05-14 1940
这里介绍了Vue语法中 v-bind 指令的5种用法。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
VUE v-bind的使用
glovett的博客
01-07 180
vue： v-bind demo : 通过改变其类名的方法改变其背景颜色。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript...
v-bind:key= item index 的区别
aaa10088的博客
04-16 906
view中 含有checkbox item text 三者 ，list的内容如下 text 绑定点击事件，点击后删除list 的内容。 vi 如果不用 v-bind:key属性 ，删除第一个元素的时候，会出现以下情况 view 里面 有checkbox {{item}} text 三者元素 删除的元素的时候，使用的是diff算法，diff算法为了节省渲染空间，会识别元素是否发生变化，如果不发生变化，就会将元素复用。 删除第一个元素时， view标签...
key的原理（vue）
qq_52135740的博客
07-27 644
面试题：vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到
v-for中为何要使用key
weixin_52012977的博客
01-16 651
v-for中为何要使用key key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点 设置key值一定能提高diff效率吗？ 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素 在不使用key的情况，vue会进行这样的操作： 分析下整体流程：
Vue入门：（v-show v-if v-bind）
Continue的博客
11-11 768
v-show 根据表达值的真假，切换元素的显示和隐藏（操纵的是display样式） <img v-show="表达式" /> 如果表达式为true，图片img显示 如果表达式为false，图片img隐藏 v-if 根据表达值的真假，切换元素的显示和隐藏（操纵的是dom元素） <img v-if="表达式" /> 如果表达式为true，图片img显示 如果表达式为false，图片img隐藏 现在我们来写个简单的程序测试一下两者的区别 <!DOCTYPE html>
Vue中key的作用以及内部实现原理
ChenHN98的博客
11-12 1008
我们一般在v-for遍历数据的时候会使用到v-bind:key='xxx'那么可以具体的作用是什么，又有什么特殊的作用呢。 作用： key是虚拟DOM对象的标识 也就是说当数据发生变化时 会生成新的虚拟DOM和旧的DOM去对比 而对比要用到就是key标识 通过key来具体比较哪一个数据 规则： (1) 旧虚拟dom中找到了与新虚拟dom相同的key 若虚拟dom中内容没变 直接使用之前的真实dom 若...
Vue中 v-bind、v-model、以及父给子传值
weixin_43377049的博客
09-06 3245
Vue中 v-bind、v-model、以及父给子传值
深入理解Vue.js：v-bind的使用与技巧
"本文主要探讨了Vue.js框架中的v-bind指令，分享了关于v-bind的使用和理解，包括它的基本功能、预期值的灵活性以及如何与数据和方法结合使用。" 在Vue.js中，v-bind是一个非常关键的指令，用于动态地绑定元素的属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值