正文
vue指令v-bind示例解析
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
1、绑定一个属性
<img id="app" v-bind:src="data:imageSrc">
<script>
var app = Vue({
el: '#app',
data: {
imageSrc: '/images/image.png'
}
})
</script>
2、缩写
<img id="app" :src="data:imageSrc">
<script>
var app = Vue({
el: '#app',
data: {
imageSrc: '/images/image.png'
}
})
</script>
3、内联字符串拼接
<img id="app" :src="'images/' + fileName">
<script>
var app = Vue({
el: '#app',
data: {
fileName: 'image.png'
}
})
</script>
4、class绑定
css代码:
.classA{
color: red;
}
.classB{
color: blue;
}
.classC{
font-size: 14px;
}
.classD{
color: green;
}
.classE{
font-size: 30px;
}
.classF{
;
}
html代码:
<div id="app">
<h6 :class="{classA: isA}">class绑定示例1</h6>
<h6 :class="[classB, classC]">class绑定示例2</h6>
<h6 :class="[classD, { classE: isE, classF: isF }]">class绑定示例3</h6>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isA: true,
classB: 'classB',
classC: 'classC',
classD: 'classD',
isE: true,
isF: true
}
})
</script>
5、style 绑定
<div id="app">
<h6 :style="{ fontSize: size + 'px' }">style绑定示例1</h6>
<h6 :style="[styleObjectA, styleObjectB]">style绑定示例2</h6>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 30,
styleObjectA: {
fontSize: '30px'
},
styleObjectB: {
color: 'red'
},
}
})
</script>
6、绑定一个有属性的对象
<div id="app">
<p v-bind="{id: ID, attr: attr, other-attr: otherAttr}">绑定一个有属性的对象</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
ID: 'myId',
attr: 'myAttr',
otherAttr: 'myOtherAttr'
}
})
</script>
7、通过 prop 修饰符绑定 DOM 属性
<div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div>
<script>
var app = new Vue({
el: '#app',
data: {
text:'text'
}
})
</script>
8、prop 绑定 “prop” 必须在 my-component 中声明
<div id="app">
<child :message="boy"></child>
</div>
<script>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>'
});
var app = new Vue({
el:'#app',
data:{
boy:{
name:'tom',
age:'50'
}
}
})
</script>
9、通过 $props 将父组件的 props 一起传给子组件
<div id="app">
<father-component :prop="someThing"></father-component>
</div>
<script>
Vue.component('father-component', {
template: '<child-component v-bind="$props"></child-component>'
});
Vue.component('child-component', {
template: '<h1>自定义组件!</h1>'
});
var app = new Vue({
el: '#app',
data:{
someThing:'someBind'
}
})
</script>
10、XLink(没搞明白。。。)
<svg><a :xlink:special="foo"></a></svg>
.camel
修饰符允许在使用 DOM 模板时将
v-bind
属性名称驼峰化,例如 SVG 的
viewBox
属性:
<svg :view-box.camel="viewBox"></svg>
在使用字符串模板或通过
vue-loader
/
vueify
编译时,无需使用
.camel。
<img id="app" v-bind:src="data:imageSrc"> <script> var app = Vue({ el: '#app', data: { imageSrc: '/images/image.png' } }) </script>
2、缩写
<img id="app" :src="data:imageSrc"> <script> var app = Vue({ el: '#app', data: { imageSrc: '/images/image.png' } }) </script>
3、内联字符串拼接
<img id="app" :src="'images/' + fileName"> <script> var app = Vue({ el: '#app', data: { fileName: 'image.png' } }) </script>
4、class绑定
css代码:
.classA{ color: red; } .classB{ color: blue; } .classC{ font-size: 14px; } .classD{ color: green; } .classE{ font-size: 30px; } .classF{ ; }
html代码:
<div id="app"> <h6 :class="{classA: isA}">class绑定示例1</h6> <h6 :class="[classB, classC]">class绑定示例2</h6> <h6 :class="[classD, { classE: isE, classF: isF }]">class绑定示例3</h6> </div> <script> var app = new Vue({ el: '#app', data: { isA: true, classB: 'classB', classC: 'classC', classD: 'classD', isE: true, isF: true } }) </script>
5、style 绑定
<div id="app">
<h6 :style="{ fontSize: size + 'px' }">style绑定示例1</h6>
<h6 :style="[styleObjectA, styleObjectB]">style绑定示例2</h6>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
size: 30,
styleObjectA: {
fontSize: '30px'
},
styleObjectB: {
color: 'red'
},
}
})
</script>
6、绑定一个有属性的对象
<div id="app">
<p v-bind="{id: ID, attr: attr, other-attr: otherAttr}">绑定一个有属性的对象</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
ID: 'myId',
attr: 'myAttr',
otherAttr: 'myOtherAttr'
}
})
</script>
7、通过 prop 修饰符绑定 DOM 属性
<div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div>
<script>
var app = new Vue({
el: '#app',
data: {
text:'text'
}
})
</script>
8、prop 绑定 “prop” 必须在 my-component 中声明
<div id="app">
<child :message="boy"></child>
</div>
<script>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>'
});
var app = new Vue({
el:'#app',
data:{
boy:{
name:'tom',
age:'50'
}
}
})
</script>
9、通过 $props 将父组件的 props 一起传给子组件
<div id="app">
<father-component :prop="someThing"></father-component>
</div>
<script>
Vue.component('father-component', {
template: '<child-component v-bind="$props"></child-component>'
});
Vue.component('child-component', {
template: '<h1>自定义组件!</h1>'
});
var app = new Vue({
el: '#app',
data:{
someThing:'someBind'
}
})
</script>
10、XLink(没搞明白。。。)
<div id="app"> <h6 :style="{ fontSize: size + 'px' }">style绑定示例1</h6> <h6 :style="[styleObjectA, styleObjectB]">style绑定示例2</h6> </div> <script> var app = new Vue({ el: '#app', data: { size: 30, styleObjectA: { fontSize: '30px' }, styleObjectB: { color: 'red' }, } }) </script>
<div id="app"> <p v-bind="{id: ID, attr: attr, other-attr: otherAttr}">绑定一个有属性的对象</p> </div> <script> var app = new Vue({ el: '#app', data: { ID: 'myId', attr: 'myAttr', otherAttr: 'myOtherAttr' } }) </script>
7、通过 prop 修饰符绑定 DOM 属性
<div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div>
<script>
var app = new Vue({
el: '#app',
data: {
text:'text'
}
})
</script>
8、prop 绑定 “prop” 必须在 my-component 中声明
<div id="app">
<child :message="boy"></child>
</div>
<script>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>'
});
var app = new Vue({
el:'#app',
data:{
boy:{
name:'tom',
age:'50'
}
}
})
</script>
9、通过 $props 将父组件的 props 一起传给子组件
<div id="app">
<father-component :prop="someThing"></father-component>
</div>
<script>
Vue.component('father-component', {
template: '<child-component v-bind="$props"></child-component>'
});
Vue.component('child-component', {
template: '<h1>自定义组件!</h1>'
});
var app = new Vue({
el: '#app',
data:{
someThing:'someBind'
}
})
</script>
10、XLink(没搞明白。。。)
<div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div> <script> var app = new Vue({ el: '#app', data: { text:'text' } }) </script>
<div id="app"> <child :message="boy"></child> </div> <script> Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样,prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>' }); var app = new Vue({ el:'#app', data:{ boy:{ name:'tom', age:'50' } } }) </script>
9、通过 $props 将父组件的 props 一起传给子组件
<div id="app">
<father-component :prop="someThing"></father-component>
</div>
<script>
Vue.component('father-component', {
template: '<child-component v-bind="$props"></child-component>'
});
Vue.component('child-component', {
template: '<h1>自定义组件!</h1>'
});
var app = new Vue({
el: '#app',
data:{
someThing:'someBind'
}
})
</script>
10、XLink(没搞明白。。。)
<div id="app"> <father-component :prop="someThing"></father-component> </div> <script> Vue.component('father-component', { template: '<child-component v-bind="$props"></child-component>' }); Vue.component('child-component', { template: '<h1>自定义组件!</h1>' }); var app = new Vue({ el: '#app', data:{ someThing:'someBind' } }) </script>
<svg><a :xlink:special="foo"></a></svg>
.camel
修饰符允许在使用 DOM 模板时将
v-bind
属性名称驼峰化,例如 SVG 的
viewBox
属性:
<svg :view-box.camel="viewBox"></svg>
在使用字符串模板或通过
vue-loader
/
vueify
编译时,无需使用
.camel。