首页 > web前端 > js教程 > 正文

对4-v-bind指令的分析(附代码)

不言
发布: 2018-07-27 12:49:20
原创
2256 人浏览过

这篇文章给大家介绍的文章内容是关于对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="&#39;http://&#39;+first" class="spancss1">{{text}}</a>
</div>
</template>
<script>
export default {
name: "v-bindLearn",
data() {
return {
title: "v-bind学习",
first: "www.baidu.com",
  text: &#39;点击跳转到百度链接&#39;
}
}
}
</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: [&#39;prop1&#39;,&#39;prop2&#39;,&#39;prop3&#39;],
        text: "数组语法1"
      }
    }
  }
</script>

<style scoped>
  .p1{
    text-align: left;
  }
  .spancss1{
    float: left;
  }
</style>
登录后复制

854419-20180718135929846-1470298509.png

方法二在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: &#39;prop1&#39;,
        prop2: false,
        prop3: &#39;prop3&#39;,
        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?&#39;prop1&#39;:&#39;&#39;,prop2,prop3?&#39;prop3&#39;:&#39;&#39;,prop4?&#39;prop4&#39;:&#39;prop5&#39;,prop6?&#39;prop6&#39;:&#39;prop5&#39;]" class="spancss1">{{text}}</span>
  </div>
</template>
<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        prop1: false,
        prop2: &#39;prop2&#39;,
        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+&#39;px&#39;}" class="spancss1">{{text}}</span>
  </div>
</template>

<script>
  export default {
    name: "v-bindLearn",
    data() {
      return {
        title: "v-bind学习",
        color1: &#39;green&#39;,
        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:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          fontWeight: &#39;bolder&#39;
        },
        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:&#39;green&#39;
        },
        prop2: {
          fontSize: &#39;25px&#39;,
          transform: &#39;rotate(7deg)&#39;
        },
        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: [&#39;-webkit-box&#39;, &#39;-ms-flexbox&#39;, &#39;flex&#39;] }" 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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!