这篇文章给大家介绍的文章内容是关于对4-v-bind指令的分析(附代码),有很好的参考价值,希望可以帮助到有需要的朋友。
1. 定义
1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外)。
2. 语法
2.1 完整语法:,解释:v-bind 是指令,: 后面的 class 是参数,classProperty 则在官方文档中被称为“预期值”。
2.2 缩写语法:,解释:: 后面的 class 是参数,classProperty 则在官方文档中被称为“预期值”。
3. 用法
3.1 绑定一个属性
全写代码示例:
<template><p> <p class="p1">{{title}}</p> <span v-bind:value="first" class="spancss1">{{text}}</span></p></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>
简写代码示例:
<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 内联字符串拼接代码示例
<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绑定
3.3.1 对象语法
span标签绑定一个对象
方法一直接在template中声明对象,对象中声明属性prop1和prop2,在javascrip输出声明属性是否可用,如果声明属性value值设置为true,则声明属性值可用,如果声明属性value值设置为false,则声明属性值不可用,代码如下所示:
<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>
方法二直接在template中声明对象名,在javascrip中声明属性prop1和prop2并输出是否可用,如果声明属性value值设置为true,则声明属性值可用,如果声明属性value值设置为false,则声明属性值不可用,代码如下所示:
<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>
3.3.2 数组语法
方法一直接在template中声明数组名,在javascript中输出需要的数组元素,示例代码如下:
<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中声明数组并定义其元素,在javascript中输出数组定义元素是否可用,如果需要使用此数组元素,则在javascript中定义要输出对应数组元素的属性值,如果不需要使用此数组元素,则设置此数组元素的属性值为false,示例代码如下:
<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>
方法三根据条件切换列表中的 绑定的class,在template声明数组和条件表达式,在javascript中输出数组元素的条件表达式的值,示例代码如下:
<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 绑定内联样式
3.4.1 对象语法,在template中声明属性,在javascript输出对应的属性值,示例代码如下:
<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 数组语法,可以将多个样式对象应用到同一个元素上
<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>
3.4.3 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。
<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>
3.4.4 多重值绑定,从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex
<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>
总结:v-bind动态地绑定一个或多个特性,或一个组件 prop 到表达式,可以很方便的渲染DOM
相关推荐:
Vue中项目的初始搭建过程(图文)
Vue-cli搭建项目后目录结构的分析(图文)
以上是对4-v-bind指令的分析(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!