模板语法与事件绑定

😀1.模板语法

本教程需要用到的数据

 data: {
 		week:2,
        msg:'hello wx',
        num:88,
        isflag:false,
        hero:{
            nickname:'厨王',
            age:18,
            addr:'江西南昌',
            height:180
        },
        scores:[23,66,92,89,100],
        groups:[
            ['张三','李四','王五'],
            ['AAA','BBB','CCC'],
            ['11','22','33']
        ]
    },

----1.1数据绑定

可绑定字符串、number、boolean、object、自定义属性自定义属性必须以data-开头

页面显示{{属性名}}

<!-- 数据绑定 -->
<view>{{msg}}</view>    <!--字符串-->
<view>{{num}}</view>    <!--number-->
<view>{{isflag}}</view> <!--boolean-->
<view>{{hero.nickname}}---{{hero.age}}</view>   <!--object-->
<view data-num="{{num}}">自定义属性</view>  <!--自定义属性(属性名必须以data-开头)-->
<checkbox checked="{{isflag}}"></checkbox><!--正确的属性值都是用{{}}来填充的-->

在这里插入图片描述成功获取....

----1.2运算

三元运算符、计算、字符串拼接、等等注: 引号后与{{}}之间不能有空格，否则运算失效

<!-- 运算 -->
<view hidden="{{num>=60 ? false : true}}">是否看得见?</view>    <!--三元运算 | 引号后与{{}}之间不能有空格...-->
<view>{{1+5}}</view>
<view>{{3%2==0 ?'偶数' :'奇数'}}</view>
<view>{{'hello'+5}}</view>

在这里插入图片描述成功进行运算显示....

----1.3列表渲染

wx:for循环 wx:key唯一key wx:for-item循环项 wx:for-index循环下标

<!-- 列表渲染 -->
<view>
    <view wx:for="{{scores}}" wx:key="*this">{{index}}-----{{item}}</view>   <!--默认变量名:item，默认下标index-->
    <view wx:for="{{groups}}" wx:for-item="g" wx:for-index="i" wx:key="i">
        <text wx:for="{{g}}" wx:for-item="item2" wx:for-index="i2" wx:key="i2">{{i2}}----{{item2}}</text>
    </view>
    <view wx:for="{{hero}}" wx:key="index">{{item}}</view><!--循环对象-->
    <text>------------------</text>
    <!-- block(不会生成真正的dom元素) -->
    <block wx:for="{{scores}}" wx:key="*this">{{index}}-----{{item}}</block>
</view>

可循环数组、对象、二维数组、json对象等等..... 在这里插入图片描述

block不会生成真正的dom元素在这里插入图片描述

----1.4条件渲染

if条件判断 wx:if-->wx:elif-->wx:else

<!-- if条件渲染 -->
<text wx:if="{{week==1}}">今天是周一</text>
<text wx:elif="{{week==2}}">今天是周二</text>
<text wx:else>今天不是周一周二</text>

最后显示"今天是周二" 也可以用hidden进行条件渲染🤭 条件渲染成功.....

😀2.事件绑定

在微信小程序中点击事件与传统不同,而是：bindtap 文本框改变事件:bindinput 改变事件bindchange

本教程用到的数据

	data: {
        info:'今天下雨'
    },

----2.1点击事件

bindtap

<button bindtap="btnhandle" data-canshu="pengke">测试按钮</button>   <!--bindtap点击事件-->

添加事件在page中

e代表当前对象,通过e.target.dataset能得到自定义属性的参数

//按钮处理事件
    btnhandle(e){
        console.log("你点了按钮.....得到参数---",e.target.dataset);
    },

点击按钮后.... 在这里插入图片描述

----2.2文本框改变事件

bindinput

此处做个小练习----通过修改文本框内容,网页内容跟着变

<!-- bindinput(文本框改变事件) -->
{{info}}
<input type="text" bindinput="inphandle" />

事件:

e.detail.原生属性名得到原生属性值给data赋值：

this.setData({
属性名:新值
})

取data值 this.data.属性名

//输入框处理事件
    inphandle(e){
        console.log("文本框修改了---->",e.detail.value);
        this.setData({  //赋值data属性
          'info':e.detail.value
        })
        //取值data属性
        console.log('消息'+this.data.info)
    },

在这里插入图片描述至于为什么我的文本框有颜色因为我加了样式呐hhhh wxss中编写

input{
    background-color: aquamarine;
}

😀3.练习

三个文本框,一个按钮通过点击按钮，第三个文本框显示第一个文本框的值+第二个文本框的值

代码实现

网页:

<text>数字1:</text><input type="text" bindinput="num1" />
<text>数字2:</text><input type="text" bindinput="num2" />
<button bindtap="getsum">+</button>
<text>结果:</text><input type="text" value="{{sum}}"/>

绑定数据与事件:

	Page({

    /**
     * 页面的初始数据
     */
    data: {
        num1:0,
        num2:0,
        sum:''
    },
    num1(e){
        this.setData({  //赋值data属性
            'num1':e.detail.value
        })
    },
    num2(e){
        this.setData({  //赋值data属性
            'num2':e.detail.value
        })
    },
    getsum(e){
        this.setData({  //赋值data属性
            'sum':parseInt(this.data.num1)+parseInt(this.data.num2)
        })
    },
})

效果图:

在这里插入图片描述模板语法与事件绑定的练习就完结了~ 看完就会🤭🤭🤭

微信小程序开发02(模板语法与事件绑定)