记录自己的学习之旅吧，也算是一种变相的监督自己，将自己的学习之路记录下来。
每次学完，写下这些，也算是一种复习。
正片：
- v-on:click="click1"简写@click="click1", 然后在方法里写一个方法click1:function(){}其中写上相应的句式
2。显示与隐藏。 有v-if 和v-show
1⃣️v-if和v-else是想搭配的。它们必须相邻 。 v-if是删除view试图的显示与隐藏。删除了view代码。内部的。可在wxml。微信开发工具进行验证查看
2⃣️v-show 是视图的显示和隐藏。但是不删除代码。可在wxml，进行查看确认
方法，计算数据和监听的区别及介绍：
1.methods 方法， computed 计算属性 watch是监听
1⃣️计算属性和方法相同点是，如果方法内值发生变化则会触发。
2⃣️不同点是当与方法内值不想干的值方式变化，方法还是会触发，计算属性则不会触发，因为有缓存
3⃣️监听则是监听变量是否改变
例子：
<template>
<view>
<view class="" v-html="text2" :style="style0" v-on:click="click1"></view>
// 上面的点击事件和上面的点击事件是相同的。@click为简写
<view class="" v-html="text2" :style="style0" @click="click1"></view>
<view class="" v-if="show"> hello </view>
<view class="" v-else> word </view>
<view class="" v-show="show"> show word </view>
<button class="" @click="click2"> 按钮 </button>
<view class="">{{getValue()}}</view>
<view class="">{{getValue1}}</view>
<button @click="click3()">按钮33</button>
<button @click="click4()">按钮44</button>
</view>
</template>
<script>
export default {
data() {
return {
text2:'点击事件',
style0:"font-size: 52px;color:yellow",
style1:"font-size: 52px;color:yellow",
style3:"font-size: 32px;color:red",
isClick:false
show : false
value:'log1',
value2:'log2',
value3:'log3'
}
},
methods: {
click1:function(){
if(this.isClick){
this.style0 = this.style1
this.isClick = false;
this.text2 = "测试点击"+this.isClick
}else{
this.style0 = this.style3
this.isClick = true;
this.text2 = "测试点击"+this.isClick
}
},
click2:function(){
this.show = this.show == true?false:true
},
click3:function(){
this.value2 = "log3"
},
click4:function(){
this.value = "log3"
},
getValue(){
console.log(" 方法触发1")
return this.value;
}
},
computed:{
getValue1(){
console.log(" 方法触发2");
return this.value;
}
}
watch:{
value2(){
console.log(" 监听触发3");
this.value = this.value2 + this.value3
}
}
}
</script>
<style>
.text2{font-size: 22px; color:red;}
</style>
