微信小程序怎么动态更新页面

微信小程序动态更新页面的案例：

wxml代码：

 <swiper indicator-dots="{{true}}"
  current="{{currentindex}}">
  <swiper-item wx:for="{{novel}}" wx:key="key">
    <view class="container card">
      <image  src="{{item.imagePath}}"></image>
      <text>第{{index+1}}部：{{item.name}}</text>
      <text>评价：{{item.comment}}</text>
      <text bindtap="onLoad" wx:if="{{index <novel.length-1}}">返回尾页</text>
    </view>
  </swiper-item>
</swiper>
<button bindtap="f1">更新书籍</button> 
</view>

wxss代码：

.container1{
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.novel{
  display: flex;
}
.novel-image{
  width: 200rpx;
  height: 200rpx
}
.novel-swiper{
  height: 90vh
}
.card{
  height: 100%;
  width: 100%
}
.return-button{
  position: absolute;
  right: 30px;
  top: 20px;
  font-size: 25rpx;
  font-style: italic;
  border: 2px solid yellow;
  border-radius: 20%
}

js文件代码：

Page({
  data: {
    novel: [
      {
        name: "《平凡的世界》",
        comment: "中国当代城乡社会生活的长篇小说",
        imagePath: "/pages/img/小说1.jpg"
      },
      {
        name: "《骆驼祥子》",
        comment: "优秀的现实主义小说",
        imagePath: "/pages/img/小说2.jpg"
      },
      {
        name: "《家》",
        comment: "入选20世纪中文小说100强（第8位）",
        imagePath: "/pages/img/小说3.jpg"
      },
      {
        name: "《悲惨世界》",
        comment: "雨果现实主义小说中最成功的一部代表作",
        imagePath: "/pages/img/小说4.jpg"
      },
    ],
    count: 0,
  },  
  onLoad:function(options){
    this.setData({
      currentindex:this.data.novel.length-1
    })
  },
  f1: function(event){
this.setData({
   //新的数据
      "novel[3].name": "《巴黎圣母院》",  
      "novel[3].comment": "是浪漫主义作品中一座里程碑",
      "novel[3].imagePath": "/pages/img/小说5.jpg"
    })
  }
})