vue怎么实现修改标签中的内容:id class style

本篇内容介绍了“vue怎么实现修改标签中的内容:id class style”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

v-bind,v-model注意

• v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=“表达式”

• v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id

• 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"; 
}

“vue怎么实现修改标签中的内容:id class style”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！