1. 首頁 > 生活百科 > >

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

生活百科

目錄

  • 1.style和class
  • 2. 條件渲染
    • 2.1 指令
    • 2.2 案例
  • 3. 列表渲染
    • 3.1 v-for：放在標簽上，可以循環顯示多個此標簽
    • 3.2v-for 循環數組，循環字符串，數字 ， 對象
    • 3.3 總結
  • 4 數組更新與檢測
    • 4.1 可以檢測到變動的數組操作
    • 4.2 檢測不到變動的數組操作：
    • 4.3 案例
  • 5. 雙向數據綁定
    • 5.1 理解
    • 5.2 案例
  • 6. 事件處理
    • 6.1 事件
    • 6.2 案例
    • 6.3 過濾案例
    • 6.4 事件修飾符
    • 6.5 按鍵修飾符
1.style和class<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><style>.red {background-color: red;}.size {font-size: 30px;}.green {color: green;}</style></head><body><div id="app"><h1>class的使用</h1><div :class="classObj">我是class的div</div><h1>style的使用</h1><div :style="styleObj">我是style的div</div></div></body><script>var vm = new Vue({el: '#app',data: {// class的字符串用法classStr: 'red size',// class的數組寫法 ， 因為類本身可以放多個，用數組最合適classList: ['red', 'size'],// class的對象classObj: {red: true, size: false},// style 的字符串寫法，以后改不好改styleStr: 'background-color: green; font-size:30px',// style 的數組寫法// styleList :[{'background-color':'green'}, {'font-size': '30px'}],//樣式如果是多個單詞用- 鏈接的形式可以寫成駝峰styleList :[{'backgroundColor':'green'}, {'fontSize': '35px'}],// style的對象寫法styleObj:{backgroundColor: 'blue', fontSize: '30px'}}})</script></html>
【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖

【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖
2. 條件渲染2.1 指令指令釋義（控制標簽的顯示與不顯示）v-if相當于ifv-if='布爾值/運算完是布爾值'v-else-if相當于else-ifv-else-if='布爾值/運算完是布爾值'v-else相當于else2.2 案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script></head><body><div id="app"><h1>條件渲染</h1><div v-if="score>=90">優秀</div><div v-else-if="score>=80 && score<90">良好</div><div v-else-if="score>=60 && score<80">及格</div><div v-else>不及格</div></div></body><script>var vm = new Vue({el: '#app',data:{score:96}})</script></html>
【vue2】Style和Class，條件，列表渲染，雙向數據綁定，事件處理

文章插圖
3. 列表渲染3.1 v-for：放在標簽上，可以循環顯示多個此標簽<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><link rel="stylesheet" ></head><body><div id="app"><div class="container-fluid"><div class="row top"><div class="col-md-6 col-md-offset-3"><div class="text-center" style="margin-bottom: 20px"><button @click="handleClick" class="btn btn-success">加載購物車</button></div><div v-if="goodList.length>0"><table class="table table-bordered"><thead><tr><th>商品id號</th><th>商品名</th><th>商品價格</th><th>商品數量</th></tr></thead><tbody><tr v-for="good in goodList"><th>{{good.id}}</th><th>{{good.name}}</th><th>{{good.price}}</th><th>{{good.count}}</th></tr></tbody></table></div><div v-else>購物車空空如也</div></div></div></div></div></body><script>var vm = new Vue({el:'#app',data:{goodList:[]},methods:{handleClick(){// 假設去后端加載的數據this.goodList = [{id:1,name:'筆',price:'20元',count:10},{id:2,name:'琴',price:'200元',count:1},{id:3,name:'棋',price:'30元',count:16},{id:4,name:'書',price:'50元',count:5},]}}})</script></html>

推薦閱讀