【小程序】渲染与引用

主要是巩固一波，基础之前讲的都差不多了

1. if语句

判断成绩是否及格，js中用if，wxml中用wx:if=

const app=getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    answer:"否",
  },
  countgrade:function(e){
    var num=e.detail.value;
    if(num>100 || num<0){
      this.setData({
        answer:"成绩有误",
      })
    }
    else if(num>=60){
      this.setData({
        answer:"是",
      })
    }
    else{
      this.setData({
        answer:"否",
      })
    }

  }

})

2. for语句

wx:for={{一个数组}}，就相当于for item in 这个数组，执行模块中的代码，如果在模块中需要引用数组当前遍历到的元素，则{{item}}，如果要引用数组当前遍历的下标，则{{index}}

  
    
      绑定数组渲染
    
    
      arry{{index}}:{{item}}
    
  
  
    
      直接数组渲染
    
    
      arry{{index}}:{{item}}
    
  
  
    
      对象渲染
    
    
      {{index}}:{{item}}
    
  
  
    
      字符串渲染
    
    
      arry[{{i}}]:{{t}}
    
  
  
    
  

3. 循环嵌套——九九乘法表

双重循环，索引都叫{{index}}，元素都叫{{item}}，不方便使用，所以给其重新命名，wx:for-key={{"i"}}给索引命名，wx:for-item={{"j"}}给数组中的值命名。

想要一个大段落不同小段落中的显示在一行，在wxss中有display:inline-block，大段落中的东西就都在同一行了。

  
    
      
        {{i}}x{{j}}={{i*j}}
      
    
  

.inline{
  display:inline-block;
  margin: 10rpx;
}
.p{
  font-size: 20rpx;
}

4. template模版使用

这就相当于映射函数，可以在同一个xml文件中写也可以单开一个写，单开一个需要import文件名。

这是主文件