Vue.js 插值表达式不生效的原因及解决方案

<!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>
     <!-- vue渲染页面的语法 -->
    <div id="app">
        <button v-on:click="add">点击{{count}}</button>
    </div>
<pre><code>&lt;!--导入Vue文件，在Window全局就有了Vue这个构造函数--&gt;
&lt;script src=&quot;./lib//vue-2.6.12.js&quot;&gt;&lt;/script&gt;
</code></pre>
   <!--创建Vue的实例对象-->
   <script>
    //创建Vue实例对象
   const vm = new Vue({
    //el是固定的写法，表示vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el:"#app",
    //data对象就是要渲染到页面上的数据
    data : {
          count:0 
    },
    methods:{
        add(e){
          if(this.count%2 === 0){
             e.target.style.backgroundColor = 'red'
          }else {
            e.target.style.backgroundColor = ''
          }
        }
    }
   });
   </script>
</body>
</html>
在这段代码中，插值表达式不生效是因为使用了错误的指令。应该使用 v-on 指令来绑定事件，而不是使用 $click。正确的代码如下：
<p><button v-on:click="add">点击{{count}}</button></p>