Core: Use data-* to set the attributes of the HTML, then use CSS attr() to get the values of the attributes of the HTML, and then use JS to modify the values of the attributes to change the content

1. Dom section

Use the data – * embedded custom data attributes on HTML elements, so that by js read | write data attributes (see specific methods js)

<div class="box1 box2" data-before=Original value ref='box' ></div>
Copy the code

2. CSS

In CSS, styles are first initialized, followed by access to data attributes defined on HTML elements via attR (name)

Note: attr() can theoretically be used for all CSS properties, but only content properties for pseudo-elements are currently supported. Other properties and advanced features are experimental for now

.box1 {// Initialize the style
    &:before {
      content: ' ';
      position: absolute;
      left: 7px;
      font-size: 14px;
      color: #f44; }}.box2::before{
   content: attr(data-before);// Add the attr attribute
}
Copy the code

3. Js part

Modify the value of the data attribute data-before, and then modify the content value

Element.getattribute (name)

Element.setattribute (name, value)

this.$refs['box'].setAttribute('data-before'.parseInt(Math.random())*100)
Copy the code

Demo

<template> <div> <div class="box1 box2" ref="box" data-before='*'></div> <button </button> </div> </template> <script> export default {methods: { handleChange() { let txt = parseInt(Math.random()*100); this.$refs['box'].setAttribute("data-before", txt); }}} </script> <style lang=" SCSS "scoped>. Box1 ::before {// init style content: '*'; position: absolute; left: 7px; font-size: 14px; color: #f44; }.box2{// add attr attribute &:before {content: attr(data-before); } } </style>Copy the code

References: 1, 2, 3