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

 

  //代码可以复制自行体验

 

<template>

 

  <div id="app" @click.stop="test('你点击了我big-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.="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>

          <select name="" id="" v-model="sel">

            <option value="杭州">杭州</option>

             <option value="北京">北京</option>

          </select><br/>

 

          <select name="" id="" v-model="sel">

             <option v-for='(city,index) in arr' :key='index' :value='city'>{{city}}</option>

          </select>

          <p>{{sel}}</p>

 

           <input type="text" v-model.lazy="sel">

           <p>{{sel}}</p>

 

           <input type="text" v-model.number="num1">+    //转为数值

           <input type="text" v-model.number="num2">=

          <input type="text" :value="num1+num2"/><br/>

           <input type="text" v-model.trim.lazy="sex">

           <p>{{sex}}</p>

 </div>

</template>

<script>

export default {

  name: 'App',

  data () {

          return { 

              sex:[],

              arr: ['北京','杭州','上海','深圳'],

              num1:,

              num2:,

              bool:[],

              isture: false,

              isElseTrue:true,

              styleclass:{

                color: "#155",

                backgroundColor:"#f0f"

              },

              sel:[]

          }

  },

  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>