# vue v-model v-bind 6

###### tags: `vue`

### v-bind

v-bind 簡寫為:，可以用在html標籤裡的屬性，讓屬性值等於你的data。

用個簡單的範例:
先在data新增一個link值為https://tw.yahoo.com/ 。

data:()=>({
        link:"https://tw.yahoo.com/",
    }),

新增一個a元素，裡面的href用:href="link，就表示href吃到data裡的link。
`<a :href="link" target="_blank">toyahoo</a>`

---

v-bind 也可以用在class
表示class有bindclass這個物件。

    <div :class="bindclass"></div>
    <button @click="change1">dark</button>

我們看到bindclass，有兩個(bgr、bgb)class名稱，有設定true和false，表示div只會吃到bgr這個class。

    data:()=>({
        bindclass:{
            bgr:true,
            bgb:false,
        },
    }),

我們可以用一個button onclick來控制div的class。

    methods:{
     change1(){
        this.bindclass.bgr = !(this.bindclass.bgr)
        this.bindclass.bgb = !(this.bindclass.bgb)
     },
    },

---

v-bind 也可以直接用在style上。

有bgg這個style

<div :style="bgg"></div>

data裡面的bgg，有"-"符號必須用字串型態。

    data:()=>({
        bgg: {
            width:'300px',
            height:'300px',
            'background-color': 'green',
        }
    }),

---

### v-model

v-model代表雙向綁定，可用在input、textarea、select上，用來同步你所輸入的值。

簡單範例

新增一個input和p元素，input裡面打v-model="test"，表示你輸入的值會改變test這個data，p用來看data裡的test變化。

    <div>
        <input type="text" v-model="test">
        <br>
        <p>v-model的值:{{test}}</p>
    </div>

在data新增test

    data:()=>({
        test:""
    }),

---

checkbox用法

在input裡 v-model一個空陣列checked，點擊後他就會抓value值放到checked裡

    <div>
        <input type="checkbox" value="deep" v-model="checked">
        <label >deep</label>
        <input type="checkbox" value="dark" v-model="checked">
        <label >dark</label>
        <input type="checkbox" value="fantasy" v-model="checked">
        <label >fantasy</label>
        <input type="checkbox" value="boy" v-model="checked">
        <label >boy</label>
        <input type="checkbox" value="next" v-model="checked">
        <label >next</label>
        <input type="checkbox" value="door" v-model="checked">
        <label >door</label>
        <br>
        <p>選到那些:{{ checked }}</p>
    </div>

新增一個checked空陣列。

    data:()=>({
        checked:[]
    }),

---

selected用法

在select裡v-model一個selected空值，點擊後他就會抓value值放到selected裡。
用v-for增加option選項。

    <div>
        <select  v-model="selected">
          <option v-for="(item,index) in array" :key="index" :value="item.v">{{item.t}}</option>
        </select>
        <br>
        <span>Selected: {{ selected }}</span>
    </div>

新增selected和array。

    data:()=>({
        selected: '',
        array:[
            {v:'可樂',t:'Cola'},
            {v:'雪碧',t:'Sprite'},
            {v:'芬達',t:'Fanta'},
            {v:'七喜',t:'7.Up'},
            {v:'蘋果西打',t:'Apple cider'},
        ],
    }),