The content of this article is about the analysis of the 4-v-bind instruction (with code). It has a good reference value and I hope it can help friends in need.
1. Definition
1.1 The v-bind directive is used to update HTML attributes responsively. In fact, it supports a single JavaScript expression (except v-for).
2. Grammar
2.1 Complete syntax: , explanation: v-bind is an instruction, followed by : The class is a parameter, and classProperty is called the "expected value" in the official documentation.
2.2 Abbreviation syntax: , explanation:: The following class is a parameter, and classProperty is called "expected value" in the official documentation .
3. Usage
3.1 Bind a property
Full code example:
<template><p> </p> <p>{{title}}</p> <span>{{text}}</span></template><script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", first: "span1", text: "绑定一个属性" } } }</script><style> .p1{ text-align: left; } .spancss1{ float: left; }</style>
Abbreviated code example:
<template> <div> <p class="p1">{{title}}</p> <span :value="first" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", first: "span1", text: "绑定一个属性" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
3.2 Inline string concatenation code example
<template> <div> <p class="p1">{{title}}</p> <a :href="'http://'+first" class="spancss1">{{text}}</a> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", first: "www.baidu.com", text: '点击跳转到百度链接' } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
3.3 class binding
3.3.1 Object syntaxSpan tag binds an objectThe method is to declare the object directly in the template, declare the attributes prop1 and prop2 in the object, and declare whether the attributes are output in javascript Available. If the declared attribute value is set to true, the declared attribute value is available. If the declared attribute value is set to false, the declared attribute value is unavailable. The code is as follows:<template> <div> <p class="p1">{{title}}</p> <span v-bind:class="{prop1:isTrue,prop2:isActive}" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", isTrue: false, isActive: true, text: "对象语法1" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
Method 2 directly declares the object name in the template, declares the attributes prop1 and prop2 in javascript and outputs whether they are available. If the declared attribute value is set to true, the declared attribute value is available. If the declared attribute value is set to false , then the declared attribute value is unavailable, the code is as follows:
<template> <div> <p class="p1">{{title}}</p> <span v-bind:class="obj" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", obj: { prop1: true, prop2: false }, text: "对象语法2" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
method always declares the array name directly in the template, Output the required array elements in javascript. The sample code is as follows:
<template> <div> <p class="p1">{{title}}</p> <span v-bind:class="arr" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", arr: ['prop1','prop2','prop3'], text: "数组语法1" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
<template> <div> <p class="p1">{{title}}</p> <span v-bind:class="[prop1,prop2,prop3]" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", prop1: 'prop1', prop2: false, prop3: 'prop3', text: "数组语法2" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
<template> <div> <p class="p1">{{title}}</p> <span v-bind:class="[prop1?'prop1':'',prop2,prop3?'prop3':'',prop4?'prop4':'prop5',prop6?'prop6':'prop5']" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", prop1: false, prop2: 'prop2', prop3: true, prop4: true, prop6: false, text: "数组语法3" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
3.4.1 Object syntax, declare attributes in template, output corresponding attribute values in javascript, sample code As follows:
<template> <div> <p class="p1">{{title}}</p> <span v-bind:style="{background:color1,fontSize:fontSize+'px'}" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", color1: 'green', fontSize: 25, text: "绑定内联样式1" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
3.4.2 Array syntax, multiple style objects can be applied to the same element<template>
<div>
<p class="p1">{{title}}</p>
<span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind学习",
prop1: {
background:'green'
},
prop2: {
fontSize: '25px',
fontWeight: 'bolder'
},
text: "绑定内联样式1"
}
}
}
</script>
<style scoped>
.p1{
text-align: left;
}
.spancss1{
float: left;
}
</style>
<template> <div> <p class="p1">{{title}}</p> <span v-bind:style="[prop1,prop2]" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", prop1: { background:'green' }, prop2: { fontSize: '25px', transform: 'rotate(7deg)' }, text: "绑定内联样式1" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
<template> <div> <p class="p1">{{title}}</p> <span v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }" class="spancss1">{{text}}</span> </div> </template> <script> export default { name: "v-bindLearn", data() { return { title: "v-bind学习", text: "绑定内联样式4" } } } </script> <style scoped> .p1{ text-align: left; } .spancss1{ float: left; } </style>
Summary: v-bind dynamically binds one or more features, or a component prop to an expression, which can easily render DOM
Related recommendations:
The initial construction process of the project in Vue (picture and text)
Analysis of the directory structure after Vue-cli builds the project (picture and text)
The above is the detailed content of Analysis of the 4-v-bind instruction (with code). For more information, please follow other related articles on the PHP Chinese website!