4.vue class 绑定- model基础应用

Posted 2020-12-08 taozhibin

//简单的案例，可以自行复制去实验操作

<template>
  <div id="app" @click.stop="test(‘你惦记了我da div‘)">
       <P :class="{test:isElseTrue}">hahaha</P>
       <p :class="class1">hjaasdasd</p>
       <p :style="styleclass">hahahaha</p>
       <p @click.stop="test(‘你惦记了我‘)">b:hahahaha</p>

       <input @keyup.65="test(‘你按下了a‘)"><br/>
       <input type="checkbox" id="bask" v-model="bool" value="篮球">
       <label for="bask">篮球</label> 
        <input type="checkbox" id="foot" v-model="bool" value="足球">
       <label for="foot">足球</label> 
        <input type="checkbox" id="ym" v-model="bool" value="羽毛球">
       <label for="ym">羽毛球</label> 
       <p>{{bool}}</p>


        <input type="radio" id="man" v-model="sex" value="男">
         <label for="man">男</label> 
              <input type="radio" id="nv" v-model="sex" value="女">
         <label for="nv">女</label> 
          <p>{{sex}}</p>
 </div>
</template>

<script>
export default {
  name: ‘App‘,
  data () {
          return { 
              sex:[],
              bool:[],
              isture: false,
              isElseTrue:true,
              styleclass:{
                color: "#155",
                backgroundColor:"#f0f"
              }
          }
  },
  methods: {          //Imethod中写的是对事件处理的处理函数
    test:function (aa) {
      console.log(aa)
    }
  },
  computed: {
    class1: function () {
      return {
        test : true
      }
    },
   
  }
}

</script>

<style>
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test{
  color:skyblue;
}
</style>