学习-微信小程序-数据绑定-条件渲染-列表渲染-模版template定义及使用-view的hidden、display的属性

日常练习微信小程序，及常用的知识点、模版使用的规则及注意事项

特别注意：微信小程序中的hidden属性、display样式实现隐藏属性，下面的代码中也有举例使用。二者都能实现view隐藏。

经过练习例子验证，及查看网上一些大牛的帖子后，自己简单总结如下：

   使用display:none控制显隐 并且可由js来动态控制，效果较好，hidden 隐藏布局，虽然隐藏了，但还是会占空间，display:none 隐藏不占据空间。

wx:if与hidden、display的区别:hidden虽然隐藏了视图组件，但组件仍然会渲染；display:none与hidden=true的效果是一样的，display:none仍然会渲染组件，而 wx:if只有在条件变成真的时候才开始局部渲染，如果条件为假，整个view块不是隐藏起来，而是根本没有生成。而hidden、display，只是使view块隐藏，但view块真实存在。

效果 图：效果图续：

wxml代码如下：

      数据绑定-练习
      {{mesg}}
      点击了{{count2}}次
      点击了{{count1}}次

     
    模版-练习 
    

   
 
    
    


    
    列表渲染-练习
    {{item}}
    


    
    条件渲染-练习
    杰 
    伟
    王激动


    
    
        条件渲染例2
        {{continue+'好，我是机器人！'}}
        
        {{continue+"、我、他，大家都快乐！"}}
    


    
    
    
    
    
    hidden(true/false)/display:(none/block)练习3
    hidden(true/false)/display:(none/block)练习4
    hidden(true/false)/display:(none/block)练习5

    运算例子-练习
    
    
    三目运算符练习
    
    
    双层大括号内可以进行算术运算，如下：
        {{aa}}+{{bb}}={{aa+bb}}
    双层大括号内可以字符串连接,如下：
    {{continue+'好，我是机器人！'}}
 

js代码如下：

var parm={
  data : {
    mesg : '你好',
    count1 : 0,
    count2:0,
    array:[0,1,2,3,4,'hello'],
    /*下面是模版需使用的数据，注意记住格式*/
    zhangshan :{ name:'张三', age:'17' },//变量之间有逗号
    lisi :{ name: '李四', age:20},

    /*条件渲染-条件*/
    view_if:"2",//js中字符串用单引号括起来，也可以用双引号括起来
    continue:'你',
    flag:'true',//在初始化逻辑值时加单引号或双引号，或不加都可以
    flag2:'block',
    aa:6,
    bb:3,
    cc:9,
  },
  /*下面是数据绑定代码*/
  event_test1: function (e) {     /*event_test1与event_test2效果等价，是两种方法实现数据刷新*/
      this.data.count2++;
      var count = this.data.count2;
      parm.data.count2=count;
      this.setData({count2 : count});
      console.log(e);
  },

  event_test2 : function(e){
    parm.data.count1=this.data.count1+1;
    /*注意下面出错的写法，以后避免出现*/
  //  this.setData(count);出错
  //  this.setData({count});出错
   //this.setData(parm.data.count);出错
    //this.setData(this.data);//不出错，数据没有更新
    this.setData(parm.data);
    console.log(e);
  }

/*下面是模版要用到的数据，需写在data里面*/
/*
zhangshan ： {
   name:'张三', age :'17'//变量之间有逗号
}
lisi :{
  name:'李四',age:20
}
*/



};
Page(parm);

wxss代码如下：

/**index.wxss**/

.event1{

background-color: lightgreen;

}

.event2{

background-color: pink;

}

.test{

background-color : aqua;

color: red;

font-size: 70 rpx;

}

.test2{

background-color: blue;

color: yellow;

font-size: 14px;

}