位置:电子教程 > Vue.JS入门教程 (如果看不到内容请使用360浏览器) 推荐学习资源
Vue.js入门
Vue.js 数据绑定
Vue.js中的指令
Vue.js 表单和双向数据绑定
Vue.js 条件和循环指令
Vue.js 循环语句v-for
Vue.js 样式绑定
Vue.js 事件处理器
Vue.js 监听属性
Vue.js 计算属性
Vue.js 组件 Component
Vue.js 自定义指令
Vue.js 路由
Vue.js 过渡和动画
Vue.js 响应接口
Vue.js中Ajax(Axios)
当前阅读教程:Vue.JS入门教程 > 属性绑定 v-bind 指令
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 数据绑定 v-cloak指令 下一篇: Vue.js中提供了完全的JavaScript表达式支持

v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。

示例

小白教程网www.2d5.net

以下实例判断 xianshi 的值,如果为 true 使用 bjheise类的样式,否则不使用该类:

代码
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>模板语法-属性绑定 v-bind 指令</title>
     <!--加载本地vue.js的框架-->
     <script src="vue2.2.2.min.js"></script>
     <!--内部样式定义-->
     <style>
             /*定义黑色的背景,白色的字*/
             .bjheise{
                      background-color:black; /*黑色背景*/
                      color: white;/*白色字*/
             }
     </style>
</head>
<body>
     <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值-->
     <div id="app">
       <!--label通过for的值和input的id值都是"r1"来绑定-->
       <label for="r1">设置黑色背景,白色字体</label>
       <!--选中input的时候会改变变量"xianshi"的值为true,然后下面就会调用样式bjheise-->
       <input type="checkbox" v-model="xianshi" id="r1">
       <br><br>
            
       <!--上面的input选中的时候,下面会显示黑色背景,白色的字-->
       <div v-bind:class="{'bjheise': xianshi}">
             v-bind:class 指令
       </div><br>
            
       <div>
             默认的样式;没有使用v-bind指令
       </div>         
     </div>
   
    <script>
    new Vue({
      el: '#app',//app为前面div区块的id的值,通过"#"号绑定
      //data区域定义属性的值
      data: {
        //变量初始化,点击input的时候值会在true和false之间切换 
          xianshi:false
      }
    })
    </script>
</body>
</html>
效果图

小白教程网www.2d5.net

image.png

参考示例

小白教程网www.2d5.net

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

后续小节我们会详细详解如何绑定普通样式,如何绑定内联样式。




上一篇: 数据绑定 v-cloak指令 下一篇: Vue.js中提供了完全的JavaScript表达式支持
毕业设计网             广告联系QQ:45157718(微信同号)