current position:Home>Vue style of front end

Vue style of front end

2022-04-29 05:12:06A little rabbit who likes eating radishes

Binding style

 Insert picture description here

Don't use it yourself DOM, Use Vue Properties of :class
So do not change the style of normal writing , Changed style :class To specify a data Variable

class = “” // This is normal use 
:class=" expression " //  The expression will be parsed 

Dynamic use of a single class style – String writing

The name of the class to be bound is uncertain

  <style> /*  Class style  */ .basic {
       height: 200px; width: 600px; } .happy {
       border: blue solid 2px; background-color: red; } .sad {
       border: yellow solid 2px; background-color: greenyellow; } .normal {
       border: black solid 2px; background-color: blue; } </style>


<body>
  <!--  Containers  -->
  <div id="root">
    <div class="basic" :class="mood" @click="changeMood">{
   {name}}</div>
  </div>

  <script> Vue.config.productionTip = false; //  prevent  Vue  Production prompt generated at startup  new Vue({
       el: '#root', data() {
       return {
       name: ' Class style instance ', mood: 'normal', } }, methods: {
       changeMood() {
       const arr = ['sad', 'normal', 'happy']; this.mood = arr[Math.floor(Math.random() * 3)]; } } }) </script>
</body>

Dynamic use of multiple class styles – Array writing

The name and number of classes to bind are uncertain

    <div class="basic" :class="fontArr">{
   {name}}</div>
      data() {
    
        return {
    
          name: ' Class style instance ',
          mood: 'normal',
          fontArr: ['font1', 'font2', 'font3']
        }

Supplementary operations on arrays :

Delete add to
List header shiftushift
End of list pushpop

Object writing

The name and number of classes to be bound are determined , But we should choose dynamically whether to use

    <div class="basic" :class="fontObj">{
   {name}}</div>
      data() {
    
        return {
    
          name: ' Class style instance ',
          fontObj: {
    
            font1: true,
            font2: true,
            font3: true
          }
        }
      }

inline style Dynamic binding styles – Using objects

<div class="basic" :style="styleObj">{
   {name}}</div>
 <div class="basic" :style="styleArr">{
   {name}}</div>

styleObj The attributes in the object are written in the existing style attributes in the small hump naming format
styleArr There are multiple in the array styleObj form .

 Insert picture description here
 Insert picture description here
eg:

<body>
  <!--  Containers  -->
  <div id="root">
    <div class="basic" :style="styleObj">{
   {name}}</div>
    <div class="basic" :style="styleArr">{
   {name}}</div>
  </div>

  <script> Vue.config.productionTip = false; //  prevent  Vue  Production prompt generated at startup  new Vue({
       el: '#root', data() {
       return {
       name: ' Class style instance ', styleObj: {
       fontSize: 50 + 'px', backgroundColor: 'red', color: 'blue' }, styleArr: [{
       fontSize: 50 + 'px', }, {
       backgroundColor: 'red', }, {
       color: 'blue' } ] } }, }) </script>
</body>

Next section : Front end vue Conditions apply colours to a drawing 、 The list of rendering

copyright notice
author[A little rabbit who likes eating radishes],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261123446376.html

Random recommended