vue-v-bind动态属性和v-model双向绑定

一：v-bind:属性的作用是 将w3c属性变为动态属性，让属性具有动态能力

1、image 的src属性  案例 简单轮播图

 

<img :src="'images/'+url+'.jpg'" alt="">
上下代码效果相同
<img v-bind:src="'images/'+url+'.jpg'" alt="">

    <div id="app">
        <h1>{{url}}</h1>
        <img :src="'images/'+url+'.jpg'" alt="">
        <div>
            <button @click="add">++</button>
            <button @click="minus">--</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                url: 0
            },
            methods: {
                add() {
                    this.url++;
                    if (this.url > 4) this.url = 0
                },
                minus() {
                    this.url--;
                    if (this.url < 0) this.url = 4
                }
            }
        })
    </script>

2、class 动态变化

 <div id="app">
        <h1>{{num}}</h1>
        <p :class="['box',{red:num>0&&num<5,blue:num>=5&&num<10,pink:num>=10}]"></p>
        <div>
            <button @click="add">++</button>
            <button @click="minus">--</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add() {
                    this.num++
                },
                minus() {
                    this.num--
                }
            }
        })
    </script>

3、style 的动态化

<div id="app">
        <div :style="{'border': '1px solid #333','font-size':num +'px',width:num*10+'px'}">你好Vue</div>
        <h1>{{num}}</h1>
        <div>
            <button @click="add">++</button>
            <button @click="minus">--</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                num: 12
            },
            methods: {
                add() {
                    this.num += 5;
                },
                minus() {
                    this.num--;
                }
            }
        })
    </script>

style属性和class属性有特殊性，如果需要使用动态传值，必须传入一个object对象

其它w3c属性一样可以利用v-bind: 动态化

二：v-model属性是使用在表单元素中的，作用是实现表单和数据的双向绑定

vue是MVVM框架，核心之一就是数据的双向绑定

    <div id="app">
        <input type="text" v-model="val">
        <p>{{val}}</p>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                val:''
            }
        })
    </script>

v-model小案例之问卷调查

 <div id="app">
        <ul>
            <li>
                <h2>姓名</h2>
                <input type="text" v-model="name">
            </li>
            <li>
                <h2>性别</h2>
                <input type="radio" name ="sex" v-model="sex" value="男">男
                <input type="radio" name ="sex" v-model="sex" value="女">女
            </li>
            <li>
                <h2>爱好</h2>
                <input type="checkbox" name="hobby" v-model="hobby" value="打球">打球
                <input type="checkbox" name="hobby" v-model="hobby" value="跑步">跑步
                <input type="checkbox" name="hobby" v-model="hobby" value="跳舞">跳舞
                <input type="checkbox" name="hobby" v-model="hobby" value="画画">画画
                <input type="checkbox" name="hobby" v-model="hobby" value="看书">看书
            </li>
            <li>
                <h2>年龄</h2>
                <select  v-model="age">
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                </select>
            </li>
        </ul>
        <h1>您的姓名是：{{name}}，性别：{{sex}}，年龄：{{age}}，爱好：{{hobby}}</h1>
        <button @click="submit">提交</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vue = new Vue({
            el : "#app",
            data : {
                name : '',
                sex : '',
                hobby : [],
                age:''
            },
            methods : {
                submit(){
                    let obj = {
                    name : this.name,
                    sex :this.sex,
                    age: this.age,
                    hobby:this.hobby.join()
                    }
                    console.log(obj)
                }
            }
        })
    </script>