亲宝软件园·资讯

展开

vue修改标签id class style

kxukai 人气:0

vue修改标签的内容:id class style

v-bind,v-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"; 
}

暂时我所接触到的方法就是以上三种,以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

加载全部内容

相关教程
猜你喜欢
用户评论