<template id="app">
?<input v-model="count" />
?<div >{{count}}: {{just}}</div>
<!-- ?下面的方法也可以實(shí)現(xiàn)同樣的效果-->
?<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",
?// 數(shù)據(jù)屬性存放在$data對(duì)象中-->
?data() {
? ?return {
? ? ?count: 0,
? ?}
?},
?//計(jì)算屬性可以通過一些計(jì)算邏輯來維護(hù)當(dāng)前屬性的值
?computed: {
? ?just() {
? ? ?return this.count > 10 ? "大于10" : "小于10";
? ?}
?},
?// 方法屬性可以保存在methods之中
?methods: {
? ?add() {
? ? ?this.count++
? ?},
?},
?// 可以通過watch:的方法來實(shí)現(xiàn)屬性的監(jiān)聽 v-model="count"
?watch:{
? ?count(oldValue, newValue){
? ? ?if (newValue > 20){
? ? ? ?alert("數(shù)值超過20")
? ? ?}
? ?}
?}
}
</script>

<style scoped>

</style>