vue笔记之v-bind/v-model双向数据绑定

责编:menVScode 2017-09-21 0:42 阅读(2529)

v-bind:绑定属性,可以绑定标签自身的属性,也可以是自定义属性;格式是v-bind:属性='变量' ,也可以简写成 :属性='变量'。

<div id="app">
	<a v-bind:href='value' v-bind:title='title' :author='author'>{{urlName}}</a>
</div>
var app = new Vue({
	el:'#app',
	data:{
		value:'menvscode.com',
		urlName:'menvscode',
		title:'MVC前端网',
		author:'wodi'
	}
});
//可以通过app.value改变绑定的属性值
app.value='www.menvscode.com';

v-bind绑定 class 的几种方式

绑定单个class

//绑定单个class
.mvc{color: red;}

<div id="app">
	<p :class="className">menvscode.com</p>
</div>

var app = new Vue({
	el:'#app',
	data:{
		className:'mvc'
	}
});

绑定多个class


.fontColor{color: yellow;}
.bold{font-weight: bold;font-size: 18px;}
<div id="app" :class="[ fontColor,bold ]">MVC前端网</div> <!-- <div id="app" class="fontColor bold"> --> var app = new Vue({ el:'#app', data:{ fontColor:'fontColor', bold:'bold' } });

若手动绑定了一个class,再用v-bind再绑定class;会将多个class值绑定在一个class上。

<div id="app" class="bg" :class="[ fontColor,bold ]">
    <!--<div id="app" class="bg fontColor bold">-->	
    MVC前端网
</div>

:class="{ }"方式:属性是css样式的名字,值是 data ( 类型为true或者false )

.bold{font-weight: bold;background: yellow;}
.fontSize{font-size:18px;}

<!--通过data中的onOff(true/false)来控制是否添加blod样式-->	
<div id="app" class="bg" :class="{ bold:boldSwitch,fontSize:sizeSwitch}">	MVC前断网
</div>

new Vue({
	el:'#app',
	data:{
		boldSwitch : true,
                sizeSwitch : false
	}
});


v-model:用来绑定表单元素,相当于绑定value值。当input里面name值改变的时候,其他绑定name数据的内容也会随着改变。

<div id="app">
	<p>{{name}}</p>
	<input type="text" v-model='name'/>
</div>
var app = new Vue({
	el:'#app',
	data:{
		name:'menvscode.com'
	}
});

动态效果:

GIF

例子

<style>
	.bold{font-weight: bold;}
	.bgYellow{background: yellow;}
	.border{border: 5px solid red;}
</style>

<!-- 当v-model绑定复选框的时,复选框选中为true,反之false,然后再去改变data里面的数据 -->
<div id="app">
	<p class="bg" :class="{ bold:bold,bgYellow:bgYellow,border:border }">MVC前端网</p>
	<input name="ball" type="checkbox" v-model='bold' />
	<input name="ball" type="checkbox" v-model='bgYellow' />
	<input name="ball" type="checkbox" v-model='border' />
</div>
new Vue({
	el:'#app',
	data:{
		bold:false,
		bgYellow:false,
		border:true
	}
});

动态效果:

GIF

v-bind 修饰符 .sync

        当子组件属性值改变后,父组件属性值立马改变。

<template>
    <div class="wrap">
        <!-- .sync:子组件is-show值改变后,父组件is-show值立马改变 -->
        <select-input :is-show.sync="listShow"></select-input>
        <list :data="listData" v-show="listShow"></list>
    </div>
</template>
<script>
    import List from '@/components/List'
    import SelectInput from '@/components/SelectInput'

    let listData = [ ]

    export default {
        name:'select',
        data(){
            return {
                listData,
                listShow:false
            }
        },
        components:{ SelectInput, List },
    }
</script>

子组件 SelectInput.vue:当isShow值改为true的时候,父组件上 listShow 的值同步改为true。

<template>
    <div class="">
        <input type="text" readonly placeholder="请选择" @click="showListHandle">
    </div>
</template>
<script>
export default {
    name:'input',
    //props:['is-show'],
    data(){
        return {}
    },
    methods:{
        showListHandle(){
            this.$emit('update:isShow',true)
        }
    }
}
</script>
标签: v-bind v-model vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码