The vue, backend passes the data as an array, how to present one by one dynamically loaded, rather than directly presented, the component used is iview?

I hope that the front end will receive an array, such as [AMagneBrect C pencil D], which can be displayed at intervals, with a feeling of dynamic loading, instead of refreshing four pieces of data together. Due to the vue response, I have not found a solution for the time being. I wonder if there is any way or whether it can be done through iviewUI?

Html css html5 javascript
Apr.02,2021

this can be solved with css animation

http://jsbin.com/lowaxebuve/1.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        * {
    padding: 0;
    margin: 0;
}
/*  */
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
html, body {
    height: 100%;
}
body {
    font-family: "Microsoft YaHei";
    background: -sharpE1E1E1;
    font-weight: 300;
    font-size: 15px;
    color: -sharp333;
    overflow: hidden;
}
.item{
  display: block;
  height: 35px;
  border: 1px solid -sharp449D44;
  margin: 15px;
  line-height: 35px;
  text-align: center;
}
    </style>
</head>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<script src="http://vuejs.org/js/vue.js"></script>
<body>
      <div id="app">
          <button @click="loaditems">load data</button>
          <div v-if="isloaded" class="item animated bounceInDown" v-for="item,index in items" :key="index" :style="{'animation-delay': index * 0.2 + 's'}">{{item.name}}</div>
        </div>
</body>
<script>
    new Vue({
      el:'-sharpapp',
      name:"test",
      data () {
        return {
          isloaded: false,
          items: []
        }
      },
      methods: {
        loaditems(){
          setTimeout(()=>{
            if(!this.isloaded){
              this.items = [
              {
                name: 'tom'
              },
              {
                name:'jerry'
              },
              {
                name:'lily'
              }
              ]
              this.isloaded = true
            } else {
              this.isloaded = false
              this.items = []
            }
            
          },300)
        }
      }
    });
</script>
</html>

wrote you an example

Previous: I use Ajax in html to reference variables in js. Because there are too many values and quantities, I want to separate them into multiple file references.

Next: Excuse me, what is the theme of linux? Is it the Ubuntu version?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu