首頁 > web前端 > js教程 > 主體

vue.JS做出購物車與地址選配

php中世界最好的语言
發布: 2018-05-02 17:47:17
原創
1518 人瀏覽過

這次帶給大家vue.JS做出購物車與地址選配,vue.JS做出購物車與地址選配的注意事項有哪些,下面就是實戰案例,一起來看一下。

首先,vue基礎js寫法

new Vue({
  el:"#app",
  //模型
  data:{
  },
  filters:{
  },
  mounted:function(){
    this.$nextTick(function(){
    //初始化调用
    });
  },
  computed:{
    //实时计算
  },
  methods:{
  }
});
登入後複製

v-for

  •   

    {{item.productName}}

  • 登入後複製

    # v-model

    (即時更新)

    
    

    {{item.productQuantity}}

    登入後複製

    v-bind

    filters過濾器的使用

    1.html參考方式

    {{item.productPrice | money('元')}}

    登入後複製

    2.過濾器##

    filters:{
      formatMoney:function(value,type){
        return "¥"+value.toFixed(2)+ type;
      }
    },
    登入後複製

    3.全域過濾器(寫在new Vue的外面)

    Vue.filter("money",function(value,type){
      return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元
    });
    登入後複製
    #呼叫methods中的方法:

    @click="method(param)"
    //或者
    @click="delFlag=false"
    @click="limitNum=addressList.length"
    登入後複製

    computed 即時計算

    如下:預設顯示三條數據,點擊more 顯示所有

  •   more                

    data:{     limitNum:3   }, computed:{   filterAddress:function(){     return this.addressList.slice(0,this.limitNum);   } },
  • 登入後複製
    先提出一兩個經典的實例

    #1.以下實現了循環卡的點擊選中

  • 登入後複製
    2.以下實現了對固定卡的點擊選中

        
    •    

      标准配送

         

      Free

        
    •   
    •    

      高级配送

         

      180

        
    •  
     
    登入後複製
    題外話:由於本人小白,學一點是一點,額外記錄一下輔助彈出框遮罩層的寫法

    登入後複製

    vue2的js語法貼幾個方便查用

    1.呼叫後端方法

    var _this = this;
    this.$http.get("data/address.json").then(function(response){
        _this.addressList = response; //这里不能直接用this 此this非彼this 所以只能声明_this
    }); 
    //以下为ES6写法,就可以直接用this了
    let _this = this;  //没用,就放这看看~
    this.$http.get("data/cartData.json",{"id":123}).then(res=>{
      this.productList = res.data.result.list;
    });
    登入後複製

    2.forEach循環

    this.productList.forEach(function(item,index){
      if(typeof item.checked == 'undefined'){ 
      //如果item中没有checked属性 在item对象中添加checked属性,值为true
        _this.$set(item,"checked",true);//局部注册
        Vue.set(item,"checked",true);//全局注册
      }
    });
    登入後複製
    相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

    建議閱讀:

    Angular服務端渲染方法詳解

    #vue實作全選反選方法總結

    以上是vue.JS做出購物車與地址選配的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!