vue v-on香v-bind来实现

主要通过v-on香v-bind来实现背景颜色的不断切换。谢谢是zuo业来的，不懂怎么联系一起

img


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p v-on:click="changeColor" v-bind:style="pstyle">{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '我是p标签',
      pstyle:{}
  },
    methods:{
    changeColor:function(){
        if(this.pstyle.background!="blue"){
            this.pstyle={background:"blue"}
        }else{
            this.pstyle={}
        }
        
    }
    }
})
</script>
</body>
</html>

你好，可以这样


```html
<div id="app">
        <div>{{msg}}</div>
        <input type="text" v-bind:value="msg" v-on:input="handle">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            methods:{
                handle:function(event){
                    this.msg=event.target.value
                    // console.log(this.msg)
                }
            }

        })

```

:style="{bakcground:isRed?'red':'blue'}" @click='isRed=!isRed'

data声明 isRed:true