昨天提到绑定的概念，v-开头的就是Vue下使令语言，今天就要来研究它们到底有哪些还有能做什麽!

v-bind 属性绑定 (简写':')

HTML模板里面的{{...}}就可以绑定data的资料；如果要在标签上绑定资料的话就要使用v-bind，如下列范例，**v-bind:属性名称="data内的名称"**就可以带入资料。

<div id="app">
    <div v-bind:id="myId">....</div>
		<button v-bind:disabled="disable">click me</button>
</div>

const vm = Vue.createApp({
    data() {
        return {
            myId: 'item',
            disable: true
        }

    }
}).mount('#app');

样式切换(:class/:style)

:class切换

当输入的文字超过10个字时，input标签内就会多class="error"，

.error {
    color: red;
}

<input type="text" v-model.trim="message" :class="{'error':message.length>10}">

const vm = Vue.createApp({
    data() {
        return {
            message: '',
        }
    }
}).mount('#app');

:style切换

用computed生成data的概念，绑定:style="msgStyle"，当超过十个字时会带入msgStyle的样式。

补充: 行内样式使用「驼峰式」命名(如:backgroundColor)

<input type="text" v-model.trim="message" :style="msgStyle">
<p>computed中的isValid状态:{{isValid}}</p>

const vm = Vue.createApp({
    data() {
        return {
            message: '',
        }
    },
    computed: {
        isValid: function () {
            return this.message.length <= 10;
        },
        msgStyle: function () {
            return {
                'border': this.isValid ? '' : '2px solid red',
                'backgroundColor': this.isValid ? '' : 'red',
            }
        }
    }
}).mount('#app');

v-model 表单绑定

模板上有表单元素(如: input, textarea...)时，会有更新资料的需求，此时就需要做「双向绑定」，把表单内的资料更新到data里面。

1. input文字框

在input里面打字，{{message}}也会立即更新资料。

<div id="app">
    <p>message is {{message}}</p>
    <input type="text" v-model="message">
</div>

const vm = Vue.createApp({
    data() {
        return {
            message: 'Hello'
        }

    }
}).mount('#app');

2. textarea文字方块

用法和input文字框一样，要注意的是，若把{{message}}放在里面，那麽打字在textarea里面时并不会更新回资料里面。

<textarea>{{message}}</textarea>
//不会绑定

<textarea v-model='message'></textarea>
//绑定

3. radio/checkbox选择框

radio单选

在设定输入框时都会先设定value属性，但有了 v-model後可以直接在data属性设定初始值，所以一开始的画面就会是item2被选取。

<p> item value now is {{item}}</p>
<div class="radio-group">
    <input type="radio" id="item1" value="1" v-model="item">
    <label for="item1">item1</label>
</div>
<div class="radio-group">
    <input type="radio" id="item2" value="2" v-model="item">
    <label for="item2">item2</label>
</div>

const vm = Vue.createApp({
    data() {
        return {
            item: 2
        }

    }
}).mount('#app');

checkbox多选

由於有多个资料，所以在data中以阵列的方式items: []接收资料。

<p> items {{items}}</p>
<div class="checkbox-group">
    <input type="checkbox" id="A" value="A" v-model="items">
    <label for="A">A</label>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="B" value="B" v-model="items">
    <label for="B">B</label>
</div>
<div class="checkbox-group">
    <input type="checkbox" id="C" value="C" v-model="items">
    <label for="C">C</label>
</div>

const vm = Vue.createApp({
	  data() {
	      return {
	          items: []
	      }
	  }
}).mount('#app');

checkbox确认框

isChecked值是true时就会被打勾

<div id="app">
    <div class="checkbox-group">
        <input type="checkbox" id="status" v-model="isChecked">
        <label for="status">status:{{isChecked}}</label>
    </div>
</div>

const vm = Vue.createApp({
    data() {
        return {
            isChecked: false
        }
    }
}).mount('#app');

4. select下拉选单

v-model没有设定初始值时 select会处於未选择的状态，在 IOS 下就无法触发change事件，因此可以在第一个选项加入disabled来排除问题。

<div id="app">
    <select v-model="selected">
        <option value="" disabled>choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <p>{{selected}} has been chosen</p>
</div>

const vm = Vue.createApp({
    data() {
        return {
            selected: ''
        }
    }
}).mount('#app');

Modifiers修饰子

在v-model後面加上.xxx就可以对它下附加指令。

• .lazy : input是每打一个字更新一次资料改为离开输入框才做更新
• .number: 在输入框中的数字由字串改为数字回传
• .trim: 把前後多余的空白过滤掉

v-text

就像模板中的{{message}}，v-text可以直接渲染，不一样的是它会盖过原本的Hello World，显示绑定的Hello。

<p v-text="message">Hello World</p>

const vm = Vue.createApp({
    data() {
        return {
            message: 'Hello'
        }
    }
}).mount('#app');

v-html

v-html会把data中的标签内容会输出成标签，而v-text是输出整个字串。

<p v-text="text">Hello World</p>
<p v-html="text"></p>

const vm = Vue.createApp({
    data() {
        return {
	         text: '<h1>yeah</h1>'
        }
    }
}).mount('#app');

v-once

资料只会渲染一次

v-pre

{{...}}在模板上是有特殊意义，若想要显示{{ text }}可以加入v-pre。

<span v-pre>{{ text }}</span>