03-v-bind单向数据绑定_v-bind是单向的嘛-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42443397/article/details/101724161

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title></title>
   <style>
       .po{
           color: red;
       }
       .active{
           color: green;
       }
   </style>
</head>
<body>
   <div id="app">

   </div>
   <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
   <script type="text/javascript">
       new Vue({
           el:'#app',
           template:`
               <div>
                   <p class ='po' :class=" {active:isRed} " >bing绑定</p>
                   <button @click = 'changeColor'>切换字体的颜色</button>
               </div>
           `,
           data:function(){
               return {
                   // msg:'active'
                   isRed:false
               }
           },
           methods:{
               changeColor(e){
                   console.log(e.target)
                   console.log(this);
                   this.isRed = !this.isRed;
               }
           }
       });
   </script>

</body>
</html>