console 命令行工具 X clear

console

Vue.component('blog-post', {
  data(){
      return {
          show:true
        //   template:this.temp.tel
      }
  },
  // 在 JavaScript 中是 camelCase 的
  props: ['todayHotList','temp'],
  template: `
    <div v-if="show">
        <h2 >{{template}}-{{getNum()}}</h2>
    </div>
    
  `,
    computed:{
        template(){
            console.log('computed');
            return this.temp.tl+'-000'
        }
    },
    methods:{
        getNum(){
            console.log('methods');
            return this.temp.tl+'-111'
        }
    },
  created(){
      console.log(this.temp);
    // this.template = this.temp
    setTimeout(()=>{
        this.show = false;
    },1000);
    setTimeout(()=>{
        this.show = true;
    },3000);
  }
})
var app = new Vue({
  el: '#app',
  data: {
    temp:'123'
  }
})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <blog-post :temp="{tl:temp}" today-Hot-List="hello!11111"></blog-post>
  </div>
</body>
</html>

本项目引用的自定义外部资源

vue.js