wxml 部分:
<input type='text' placeholder='请输入内容' bindinput='getval' value='{{val}}'></input>
<button bindtap='add'>添加</button>
<view wx:for="{{list}}" wx:key="{{index}}">
<text>{{index+1}}---{{item}}</text>
<button size='mini' bindtap='del' data-index="{{index}}">删除</button>
</view>
js 部分 :
data: {
info:'hello word!',
id:1,
arr:[1,2,3,4,5,6,'hello'],
val:'',
list:[]
},
getval(e){
// console.log(e.detail.value)
this.setData({ val: e.detail.value})
},
add(){
var data1 = this.data.list;
data1.push(this.data.val)
this.setData({list:data1,val:''})
},
del(e){
// console.log(e.target.dataset.index)
var i = e.target.dataset.index;
var data2 = this.data.list;
data2.splice(i,1)
this.setData({list:data2})
},
结果如下:
总结:
1、小程序里面是不支持所有dom的操作的,因为他的全局对象不是window ,就意味着我们在整个小程序里面不能使用jQuery 。 没有window 就不能操作dom 就不能得到其他基于js封装的插件及类库。 因为jQuery 包裹 swiper什么的 他的全局对象基于js 都是基于window对象的 小程序里面是没有的 ,所以这里面是不能引入一些插件来使用的 。
2、为了方便开发者减少配置项, 规定描述页面的这四个文件必须具有相同的路径和文件名
3、数据绑定:
也是双括号插值法 {{ }}
简单绑定:<view> {{ message }} </view>
组件属性(需要在双引号之内):<view id=“item-{{id}}”> </view>
控制属性(需要在双引号之内):<view wx:if="{{false}}"> </view>
关键字(需要在双引号之内):<checkbox checked="{{false}}"> </checkbox>
数组遍历:<view wx:for=“{{list}}”> {{item}} </view>
{{index}}==下标 {{item}}遍历到的数据值
wx:for-index=“i”可以指定数组当前下标的变量名: {{i}} =={{index}}
wx:for-item=“a” 可以指定数组当前元素的变量名 : {{a}}=={{item}}
wx:for用在<block/>标签上,以渲染一个包含多节点的结构块
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态,需要使用 wx:key 来指定列表中项目的唯一的标识符。
4、事件绑定:
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
代码如上:先绑定时间 然后在js里面先把时间写出来 然后先测试一下 看输出什么? 然后找到需要的值
一步步来 别急,需要什么先console.log() 一下 输出出来 然后找需要的值