VUE學習03--VUE數據綁定（綁定數據，綁定屬性，綁定樣式，雙向數據綁定）

今天我們一起來學一學 VUE的綁定。

一、數據綁定

首先可以先把數據定義在Vue頁面中的<script>標籤內，然後在<template>標籤中通過{{變量名去取}}。

另一種方法：<div v-text="變量名"></div>

如果變量是對象，可以{{對象.屬性}}去取。

如果變量是集合，可以通過 v-for 遍歷去取。

請看下面實例（我們在新建項目中的App.vue）：

<template>
  <div id="app">
 <h2>hello vue 綁定數據： {{msg}}</h2>
    <br>
    綁定數據的另一種方法：
    <div v-text="msg"></div>    
    <br>
    <h3>{{obj.name}}</h3>
    <br>
    <hr>
    
<ul><li v-for ="item in list" >
{{item}}
</li></ul>
<br>
<ul><li v-for ="item in list1" >
{{item.title}}
</li></ul>
<ul><li v-for ="item in list2" >
{{item.cate}}
  <ol>
  <li v-for ="news in item.list" >
  {{news.title}}
  </li>
  </ol>
</li></ul>
<br>

  </div>
</template>

<script>
export default {
  name: 'App',
   data () { /*業務邏輯裏面定義的數據*/
    return {  
  msg: 'Welcome to Your Vue.js App',
      obj:{name:"張三"},
      flag:false,
      list:['111','222','333'],
      list1:[
        {'title':'1111'},{'title':'2222'},{'title':'2222'}
      ],
      list2:[
        {
          "cate":"國內新聞",
          "list":[
            {'title':'國內新聞1111'},
            {'title':'國內新聞2222'}
          ]
        },
        {
          "cate":"國際新聞",
          "list":[
            {'title':'國際新聞1111'},
            {'title':'國際新聞2222'}
          ]
        }
      ]

}
}
}
</script>

<style>

</style>

二、屬性綁定

綁定屬性主要使用 v-bind命令。 如：<img v-bind:src="url">

也可以使用省略寫法 :  如:  <img :src="url">

具體示例代碼如下：

<template>
  <div id="app">
<h1>綁定屬性</h1>
<div v-bind:title="title">aaaa</div>
<img v-bind:src="url">
<br>
另一種寫法
<img :src="url">
<br>
綁定html
<div v-html="h"></div>


  </div>
</template>

<script>
export default {
  name: 'App',
   data () { /*業務邏輯裏面定義的數據*/
    return {  
      url:"https://cn.vuejs.org/images/vuemastery.png?_sw-precache=6f09ce143467fba22039bde3f2070c19" ,
      title:"我是一個標題",
      h:'<h2>我是h2</h2>'
}
}
}
</script>

<style>

</style>

樣式綁定：

class 與 style 是 HTML 元素的屬性，用於設置元素的樣式，我們可以用 v-bind 來設置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時， 專門增強了它。表達式的結果類型除了字符串之外，還可以是對象或數組。

內聯CSS也可稱爲行內CSS或者行級CSS，它直接在標籤內部引入，顯著的優點是十分的便捷、高效；但是同時也造成了不能夠重用樣式的缺點，如果代碼行數到達一定長度不建議採用。通常內聯CSS作爲測試使用，可以查找代碼中bug。內聯樣式的優先級比選擇器優先級要高，且不能重用，請謹慎使用~

<template>
  <div id="app">
    <!--類選擇器樣式綁定-->
    <div v-bind:class="{active:isActive}"></div>
    <br>
    <!--內聯樣式綁定-->
    <div v-bind:style="{ width : wid +'px' , height : hei + 'px', background : color }"></div>
  
  </div>
</template>

<script>
export default {
  data(){
    return {
      isActive: true,
      wid:100,
      hei:100,
      color:"red",
      actactiveColor:'red',
      fontSize:100
    }
  }
}
</script>

<style lang="scss">
  .active {
    width: 100px;
    height: 100px;
    background: green;
  }
  </style>

四、雙向數據綁定

v-model 指令用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。它負責監聽用戶的輸入事件以更新數據，並對一些極端場景進行一些特殊處理。

下面是一個簡單的示例，大家可以嘗試一下，就會明白其中含義。

<template>
  <div id="app">
    <input  v-model="message">
    <br>
    <br>
    下面是復讀機，通過input框的輸入影響了message的值，message的值改變又顯示在下方，這就是雙向綁定
    <div v-bind:class="{active:flag}">{{message}}</div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      message:"",
      flag:true
    }
  }
}
</script>

<style lang="scss">
  .active {
    width: 145px;
    height: 20px;
    background: grey;
  }
  </style>

 

喜歡的朋友歡迎點贊，評論，關注哦~~