vue 和 js 获取 dom节点下的某个元素，然后设置样式

vue获取dom节点下的类名，然后修改样式

<div ref="divRef">
	<div class="a">提到岁月，你们总说它是长河，流得头也不回。</div>
	<div class="a">少不更事的年纪，我也用过老成口气，念过孔夫子的，逝者如斯乎，不舍昼夜。</div>
	<div class="b">而今扭头过去看，才觉得如此可笑。</div>
	<div class="d">如果没有你的话，那些都是真理，可是你来了，那些就是伪句。</div>
	<div class="e">时光如滞，时光如滞啊。因为，那年遇到了你，我就被留在了那里。岁月知我，你不知</div>
</div>
	
<script>
export default {
	mounted(){
		this.getDom();
	},
	methods:{
		getDom(){
			let dom = this.$refs.divRef;
	        let children = dom.children;
	        for (let i = 0; i < children.length; i++) {
	            if (children[i].className == "a") {
	                children[i].style.color = 'red';
	            } else {
	                children[i].style.color = 'blue';
	            }
        	}
		}
	}
}
</script>

运行结果：

js获取dom节点下的类名，然后修改样式

 <div>
	<div class="a">或许，人生的每一次蜕变，都是触目惊心的。</div>
    <div class="b">瞬间的美丽总会是发生得太突然，好比是看一场电影，那些与你接踵摸肩的陌生人</div>
    <div class="b">也算是人海茫茫中的一叶</div>
    <div class="c">然而他们能与你共度一段时光、感受同一片天空、</div>
    <div class="d">同一片视野的快乐，也是缘分的因缘吧!</div>
</div>
	
<script>
export default {
	mounted(){
		this.getDom();
	},
	methods:{
		getDom(){
			//第一种 获取指定某个 类名
			document.querySelector('.a').style.color = 'red';
			//第二种 获取所有类名集合的第一个（性能好于第三种）
			document.querySelectorAll('.b')[0].style.color = 'blue';
			//第三种 获取所有类名集合的第一个
            document.getElementsByClassName('c')[0].style.color = 'green';
		}
	}
}
</script>

运行结果：