var app= new Vue({
el:"#app",
data:{
message:" ",
counter:0,
counter1:0
},
watch:{
},
computed:{
output:function(){
console.log("computed");
return this.counter>10?"大于10":"小于10";
}
},
methods:{
alertMe:function(){
alert("Pressed");
},
showResult:function(){
console.log("result");
return this.counter>10?"大于10":"小于10";
}
// increase:function(){
// this.counter++;
// this.result=this.counter>10?"大于10":"小于10";
// },
// decrease:function(){
// this.counter--;
// this.result=this.counter>10?"大于10":"小于10";
// }
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
<!-- v-model 得到用户输入的data -->
<input type="text" v-model="message" placeholder="输入的东西会显示在下方"/>
<p>{{message}}</p>
<!-- keyup触发alert -->
<p>
keyup:<input type="text" v-on:keyup="alertMe">
</p>
<!-- keyup触发alert, 加上.enter限制 -->
<p>
keyup.enter:<input type="text" v-on:keyup.enter="alertMe">
</p>
<!-- keyup触发alert, 加上.enter和.space, 按下其中一个都会弹出来 -->
<p>
keyup.enter.sapce:<input type="text" v-on:keyup.enter="alertMe">
</p>
<!-- 用表达式代替写方法的位置 -->
<button @click="counter++">加1</button>
{{counter}}-----{{counter>10?"大于10":"小于10"}}
<br><!-- 用方法return 大于10, 小于10 -->
<!-- <button @click="increase()">加1</button>
<button @click="decrease()">减1</button> -->
<!-- {{counter}}----{{result}} -->
<br>
<!-- 结合表达式和方法return 大于10, 小于10 -->
<button @click="counter++">加1</button>
<button @click="counter--">减1</button>
<!-- counter1虽然没有用到showResult方法,可是点击counter1的时候仍然会把所有方法运行一遍 -->
<button @click="counter1++">counter1加1</button>
{{counter1}}
<!-- output作为一个计算属性 -->
{{counter}}----{{showResult()}}---{{output}}
</div>
.left{
float: left;
}
.right{
float: left;
}