在尝试随便写一些简单的代码熟悉微信小程序的代码写法时,发现一个简单的点击按钮切换一个变量的值,然后根据这个值作为wx:if属性的值切换显示隐藏时,虽然变量的值改变了的但是页面并没有变化。
代码如下:
<!--index.wxml-->
<button bindtap="mess">点击</button>
<block >
<view class="dis" wx:if="{{dis}}">
1111
</view>
</block>
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
foo: 'my-foo',
bar: 'my-bar',
dis:false,
},
mess(){
this.dis=this.dis
console.log(this.dis)
},
控制台输出是能够正常输出的
但是页面需要显示的内容却没有任何变化
然后查了一下资料才知道,改变变量的值是需要写在this.setData({})里才能够切换显示或隐藏,可以理解为写在this.setData({})中的变量切换之后才会触发页面重新渲染,这和vue的数据发生变化自动更新视图不一样
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
foo: 'my-foo',
bar: 'my-bar',
dis:false,
},
mess(){
this.setData({
dis:!this.data.dis
})
console.log(this.data.dis)
},
这样就能够正常点击按钮显示或隐藏了
在微信小程序开发的官方文档中并没有查到相关的问题,并且与vue的代码写法有挺大的区别。