console 命令行工具 X clear

console

new Vue({
      el: '#app',
      data: function() {
        return { 
          input: '',
          tmpData:[
            {name:'感冒药停用停产'},
            {name:'大屠杀幸存者去世'},
            {name:'史密斯门牙被打掉'},
            {name:'复联4预告将发布'},
            {name:'教培公厕装摄像'},
            {name:'酒店牙刷不消毒'},
            {name:'新疆队签约哈达迪'},
            {name:'长白山遭查封'},
            {name:'尹正以鞋会友'}
          ]
        }
      },
	  directives:{
      highlight:{
        bind:function(el,binding){
            if(binding.value == '') return ;
            let word = el.innerText;
            let light = '<code style ="font-size:20px;font-weight:blod;color:red;">'+ binding.value +'</code>'
            let reg = new RegExp(binding.value, 'g');
            el.innerHTML = word.replace(reg,light)
        },
        update:function(el,binding){
            if(binding.value == '') return ;
            let word = el.innerText;
            let light = '<code style ="font-size:20px;font-weight:blod;color:red;">'+ binding.value +'</code>'
            let reg = new RegExp(binding.value, 'g');
            el.innerHTML = word.replace(reg,light)
        }
      }
    }
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  
  <div id="app">
    <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
    
    <div id="content">
      <ul>
        <li v-for="item in tmpData" v-highlight:key = "input">{{item.name}}</li>
      </ul>
    </div>
  </div>
  
  
  
  
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</html>