使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答

<template><div><div class="roll_header"><div class="flex_item" v-for="(ti,index) in pagetitle" :key="ti" @click="changeClassify($event,index)" :class="{'changeclassify':index==temps}">{{ti}}</div></div><div class="roll_bar"><div class="bar_item" ref="baritem"></div></div></div>
</template><script>
export default {data(){return{pagetitle:["登录","注册"],temps:0,}},methods:{changeClassify(event,index){// 改变temps的值，当前点击的控制的元素让他拥有changecolor样式this.temps=index;// 得到元素的宽度用来计算bar要移动多远let dis=event.target.offsetWidth;let distance=dis*index;// 注意拼接pxthis.$set(this.$refs.baritem.style,'marginleft',distance+'px')console.log(this.$refs.baritem.style)}}
};
</script>
<style>
.roll_header {width: 100%;height: 46px;display: flex;justify-content: center;line-height: 46px;color: rgb(121, 121, 121);font-size: 18px;cursor: pointer;
}
.flex_item {width: 60px;text-align: center;/* border: 1px solid rebeccapurple; */
}
.roll_bar{width: 180px;height:3px;border:1px solid rgb(223, 223, 223);background: white;margin: -4px auto;padding:0 30px;border-radius:2px;
}
.bar_item{width:60px;height:100%;background: coral;border-radius:4px;
}
.login{color: coral;
}
/* 选择拥有样式 */
.changeclassify{color: coral;
}</style>

这是点击检测看赋值没问题，但是视图就是不变啊，头秃！！！！

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答相关推荐

vue里面的ref详解
在以前的js中我们都是通过设置id,然后通过document.getelementbyid(hello) 来获取dom树进行操作,方便快捷. 但是在vue框架里面,我们都是通过ref设置来获取参数的, ...
22.调用element方法控制dom元素
<!DOCTYPE html><html ng-app="a101"><head lang="en"> <meta c ...
vue里面的model
vue里面的model双向绑定,就是一种代码组合即语法糖,我们之前在实现功能的时候,父组件通过props向子组件里面传递参数,子组件处理完成之后,如果想将结果传回父组件的话,需要调用emit里面的自定 ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
【使用 DOM】为DOM元素设置样式
1. 使用样式表可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表都由一个CSSStyleS ...
【温故而知新-Javascript】为DOM元素设置样式
1. 使用样式表可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表都由一个CSSStyleS ...
vue 3.0 使用ref获取dom元素
前言附上vue3.0文档:Vue3中文文档 - vuejs 2022.10.22 更新鉴于较多人询问几个高频问题,在此做统一回复 ref.value获取到的是null 答:检查是否将ref变量re ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答

使用Vue里面的ref 控制DOM元素的样式marginleft，marginLeft的只是变化了，但是视图没有变化，求解答相关推荐

最新文章

热门文章