vue实现修改标签中的内容:id class style
更新时间：2022年07月02日 15:52:32 作者：kxukai
这篇文章主要介绍了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";
}暂时我所接触到的方法就是以上三种，以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
分页在展示数据列表的场景肯定是非常多的,一般的项目开发中,数据量特别大,一般都是后端接口直接处理分页返回,前端直接调用即可,本文给大家介绍了vue使用elementUI组件实现分页效果,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了vue实现发送短信倒计时和重发短信功能的相关知识,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2023-12-12
项目中需要使用websocke，这个是我自己修修改改好多次之后用得最顺手的一版，分享一下。这个封装需要搭配vuex使用，因为收到的数据都保存在vuex中了，真的绝绝子好用，解决了我一大堆问题2022-09-09
这篇文章主要为大家详细介绍了如何使用Vue实现封装树状图,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
这篇文章主要介绍了Vue如何实现table表格置顶，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇Vue中img的src是动态渲染时不显示的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Element Backtop回到顶部的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了解决.vue文件url引用文件的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue 翻页组件vue-flip-page，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论