vue-组件的属性和方法简单介绍

<template id="app">
 <input v-model="count" />
 <div >{{count}}: {{just}}</div>
<!--  下面的方法也可以实现同样的效果-->
 <div v-if="count>10">{{count}}: 大于10</div>
 <div v-else-if="count === 10">{{count}}: 等于10</div>
 <div v-else>{{count}}: 小于10</div>
 <button @click="add">自增</button>
</template>

<script>
export default {
 name: "attr_and_methods",
 // 数据属性存放在$data对象中-->
 data() {
   return {
     count: 0,
   }
 },
 //计算属性可以通过一些计算逻辑来维护当前属性的值
 computed: {
   just() {
     return this.count > 10 ? "大于10" : "小于10";
   }
 },
 // 方法属性可以保存在methods之中
 methods: {
   add() {
     this.count++
   },
 },
 // 可以通过watch:的方法来实现属性的监听 v-model="count"
 watch:{
   count(oldValue, newValue){
     if (newValue > 20){
       alert("数值超过20")
     }
   }
 }
}
</script>

<style scoped>

</style>