vue实现修改标签中的内容:id class style
vue修改标签的内容:id class style
v-bind,v-model注意
v-bind
动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值=“表达式”v-bind
用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :idv-model
用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。
Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
<button v-bind:disabled="someDynamicCondition">Button</button>
<p :[list]="demo()">{{demo()}}</p> el: '#example', data: { id: 1, list: 'class' }, methods:{ demo(){ return 'a'; } }
动态改变class和style的一些方法
:class="{'class1':'true'=='true',class2:status=='status'}"
这句话的意思是,class1和class2都是两个样式,但是class1是必须存在的,class2是要根据data里面的status的状态来决定是否存在的,class1必须存在,之前试过很多种方法,都不能正确显示,所以我就强制加了一个判断条件:true==true,然后后面的是动态绑定内容(动态绑定)
ref="one"
对于想改变的地方绑定一个ref,让参数按照引用传递
然后可以在下面的函数中来改变,例如:
this.$refs.one.style.border = "1px solid red";
使用$event
在需要改变的地方,加入$event参数(如果只有一个不加也可以),例如:
@click="changeClass($event)"
下面的函数处理
changeClass(e){ console.log(e.target); //可以打印出来e.target里面的值,其实就是页面的dom元素,然后可以按照自己想法更改样式了,还可以根据e找到页面所有节点 //例如:e.target.parentNode.style.border = "1px solid red"; }
暂时我所接触到的方法就是以上三种,以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vuex中this.$store.commit和this.$store.dispatch的基本用法实例
在vue的项目里常常会遇到父子组件间需要进行数据传递的情况,下面这篇文章主要给大家介绍了关于vuex中this.$store.commit和this.$store.dispatch的基本用法的相关资料,需要的朋友可以参考下2023-01-01vue.js利用Object.defineProperty实现双向绑定
这篇文章主要为大家详细介绍了vue.js利用Object.defineProperty实现双向绑定,帮大家解析神秘的Object.defineProperty方法2017-03-03使用element-ui设置table组件宽度(width)为百分比
这篇文章主要介绍了使用element-ui设置table组件宽度(width)为百分比方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解
在vue中进行前端网页开发时,通常列表数据用el-table展示,下面这篇文章主要给大家介绍了关于Vue+ElementUi实现点击表格中链接进行页面跳转与路由的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论