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

目录
  • vue修改标签的内容:id class style
    • v-bind,v-model注意
  • 动态改变class和style的一些方法
    • 使用$event
    • 下面的函数处理

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

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

赞 (0)

相关推荐

  • Vue中Class和Style实现v-bind绑定的几种用法

    Vue中Class和Style实现v-bind绑定的几种用法

    项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中. 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式. 那么在 vue 中 我们如何处理这类的效果呢?

  • 详解.vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由来 项目中使用了elementUI框架, 与.vue文件. 现状: <template>中使用$style:[类名], <style module>进行了样式的绑定. 个人认为使用$style这种方式的绑定, 写起来很麻烦. 不仅仅是麻烦更重要的是, 没有办法直接影响和修改elemen

  • vue中element-ui组件默认css样式修改的四种方式

    vue中element-ui组件默认css样式修改的四种方式

    目录 前言 1.使用全局统一覆盖 2.在.vue文件中修改 3.修改组件的style样式 4. 参考element-ui官方文档的api 疑问 总结 前言 修改element-ui组件的默认样式一直是一个老生长谈的话题,在做完公司的一整个项目后,我总结了以下4种修改element-ui默认样式的方法. 1.使用全局统一覆盖 针对一些通用的.样式固定的组件,可以全局处理,其方法是新建一个css或者scss文件,覆盖element原有的class 你可以在src/styles目录下新建一个eleme

  • vue 动态修改a标签的样式的方法

    vue 动态修改a标签的样式的方法

    公司要做一个类似今日头条的项目,用前后端分离的方式做成HTML5页面,先在微信中运行,领导说想看看效果怎么样.今日头条头部的导航是可以滚动和添加类别的,我们这个项目也是一样.所以在导航这个地方就需要在点击不同分类的同时,样式也是跟着变的,我在网上搜索了一下,发现了下面的代码,简洁清淅,不过具体网址忘记了,先把代码贴出来给大家看一下,想知道网址的可以去网上搜索一下. <!DOCTYPE html> <html lang="en"> <head> <

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

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

    目录 vue修改标签的内容:id class style v-bind,v-model注意 动态改变class和style的一些方法 使用$event 下面的函数处理 vue修改标签的内容:id class style v-bind,v-model注意 v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值=“表达式” v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id v

  • vue 清空input标签 中file的值操作

    template中: <input type="file" ref="pathClear" @change="onUpload" name="file" id="file"> methods中: onUpload(){ this.$refs. pathClear.value ='' }, 补充知识:将input file的选择的文件清空的两种解决方案 上传文件时,选择了文件后想清空文件路径,搜索

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • Vue刷新修改页面中数据的方法

    因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:

  • java实现利用String类的简单方法读取xml文件中某个标签中的内容

    1.利用String类提供的indexOf()和substring()快速的获得某个文件中的特定内容 public static void main(String[] args) { // 测试某个词出现的位置 String reqMessage = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>" + "<in>" + "<head&g

  • vue如何修改data中的obj数据的属性

    目录 修改data中的obj数据的属性 修改data以实现数据响应式 怎么保证你的变化我Vue能监听到? 如果初始值没给这个变量Vue还能监听吗? 修改data中的obj数据的属性 //方法一 var obj = this.obj; obj.name = 'long'; this.obj = obj; //方法二 Vue.set(this.obj, "password", "num"); //part1,要修改的obj对象; //part2,要添加或者修改的属性;

  • vue如何修改data中数据问题

    vue如何修改data中数据问题

    目录 vue修改data中数据 vue中修改简单类型数据 vue中修改数组的方法 vue中修改对象的方法 关于删除 vue修改数据不生效,页面不刷新 vue中数据类型 vue数据侦听简易理解 数据更新后,页面不刷新的可能原因 vue修改data中数据 vue的data中保存一些数据,用于页面的渲染.有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新. 注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改.强

  • jquery ajax双击div可直接修改div中的内容

    jquery ajax双击div可直接修改div中的内容

    最近在做后台功能开发的时候,用到对排序字段的修改,感觉只为了修改一个排序值,而要重新进入编辑页比较麻烦,于是网上找点资料自己动手写了一个jquery双击实现直接修改排序值的效果: html代码: <div title="[双击可直接修改]" class="changeSort" id="{$id}">{$sort}</div> JS代码: <script type="text/javascript"

  • php更新修改excel中的内容实例代码

    复制代码 代码如下: //模板存放目录$dir = $DOCUMENT_ROOT.'/backoffice/admin/oemcheck/'; $templateName = '1.xlsx';$outputFileName = '模板.xlsx';$txt='test'; //实例化Excel读取类$PHPReader = new PHPExcel_Reader_Excel2007();if(!$PHPReader->canRead($dir.$templateName)){ $PHPRead

  • vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与图片裁剪功能组件结合使用详解

    vue项目ElementUI组件中el-upload组件与裁剪功能组件结合使用,供大家参考,具体内容如下 如下图所示,点击上传组件,选择文件后,会立马弹出图片裁剪功能组件的页面 问题描述: 1.在使用upload组件中,如果修改fileList中的内容,浏览器会报错2.获取上传的文件,传递给图片裁剪组件(在on-change中获取文件并传递个裁剪组件)3.要获取裁剪后的图片即File文件(将裁剪后的图片返回出去)4.获取到裁剪后的file调用上传的接口 由于el-upload组件默认使用的是“选

随机推荐