vue学习-computed,侦听数据,v-model

计算属性computed

<template>
  <div id="app">
   <h1>{{msg}}</h1>
   <h1>{{msg.split('').reverse().join('')}}</h1>
   <h1>{{reverseMsg}}</h1>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name:'App',
  data:function(){
    return{
      msg:"HelloWorld"
    }
  },
  //可以将data里的数据，计算的结果缓存起来，在不修改msg的时候，计算得到的结果不会重新计算
  computed:{
    reverseMsg:function(){
      return this.msg.split('').reverse().join('')
    }
  }
}
</script>

监听数据，修改样式

<template>
  <div id="app">
  <!--：是属性的绑定,和v-bind:一样-->
   <h1 :style="styleObj">点击次数：{{num}}</h1>
   <button @click='addClick'>增加次数</button>
   
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name:'App',
  data:function(){
    return{
      num:0,
      styleObj:{}
    }
  },
methods:{
  addClick:function(){
    this.num++
  }
},
  watch:{
    num:function(newValue,oldValue){
      console.log("newValue:",newValue);
      console.log("oldValue:",oldValue);
      if(newValue>10){
        console.log("值大于10");
        this.styleObj={
          backgroundColor:"red"
          //或者"background-color":"red"
        }
      }
    }
  }
}
</script>

v-model表单输入绑定

<template>
  <div id="app">
        <input v-model="username" placeholder="请输入用户名" type="text">
        <h1>用户名：{{username}}</h1>
        <input type="checkbox" v-model="check">
         <h1>check：{{check}}</h1>
         <textarea v-model="article" id="" clos="30" rows="10"></textarea>
         <h1>textarea：{{article}}</h1>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name:'App',
  data:function(){
    return{
       username:"",
       check:true,
       article:""
    }
  },
methods:{
  
}
}
</script>

结果：