Vue指令篇

1.基本用法

2.class和style的绑定

1）绑定class

2）绑定style

3.修饰符

1) .camel

2) .prop

1.基本用法

作用：动态地绑定一个或多个特性，也可以绑定动态特姓名，用法如下例

<div id="app"><!-- 绑定一个属性, : 后的为传递的参数 --><img v-bind:src="data:imageSrc"><!-- 动态特性名 (2.6.0+) --><button v-bind:[key]="value">点击</button><!-- 缩写 --><img :src="data:imageSrc"><button :[key]="value">点击</button><!-- 内联字符串拼接 --><img :src="'./'+fileName">
</div

const vm = new Vue({el:"#app",data:{imageSrc:"./pic1.jpg",fileName:"pic1.jpg",key: "id",value: "btn"}
})

【结果】

【注】没有参数时，可以绑定一个包含键值对的对象

<div v-bind="{class:'box',[key]:'my-box'}"></div>

【结果】

2.class和style的绑定

由于字符串拼接麻烦且易错，所以在绑定class或style特性时，Vue做了增强，表达式的类型除了字符串之外，还可以是数组或对象。

1）绑定class

对象语法：可以判断某个类名是否存在于class属性中，如下例，red是否存在于class中，取决于isRed的真假

<div v-bind:class="{red: isRed, green:isGreen}"></div>

const vm = new Vue({el: "#app",data: {isRed: true,isGreen:false}
})

【结果】

数组语法：我们可以把一个数组传给v-bind：class，以应用一个class列表

<div v-bind:class="classList"></div>

const vm = new Vue({el: "#app",data: {classList:["box", "reset"],}
})

【结果】

三元表达式：在数组语法中可以使用三元表达式来切换class

<div v-bind:class="[isActive ? activeClass : '',errorClass]"></div>

const vm = new Vue({el: "#app",data: {isActive: true,activeClass: 'active',errorClass: 'error'}
})

【结果】

数组中使用对象语法：

<div v-bind:class="[classA,{[classB]:isB},{[classC]:isC}]"></div>

const vm = new Vue({el: "#app",data: {classA: 'A',classB: 'B',classC: 'C',isB: false,isC: true}
})

【结果】

【注】v-bind：class可以和普通class共存

2）绑定style

对象语法：看着比较像css，实际上是一个JavaScript对象。CSS属性名可以用驼峰式（camelCase）或者短横线分隔（kebab-case）来命名，但是使用短横线分隔时，要用引号括起来

<div v-bind:style="{fontSize:size +'px'}"></div>

const vm = new Vue({el: "#app",data: {size: 300}
})

【结果】

也可以直接绑定一个样式对象，这样模板会更清晰：

<div v-bind:style="styleObject"></div>

const vm = new Vue({el: "#app",data: {styleObject: {fontSize: '300px',color: 'red'}}
})

【结果】

数组语法：将多个样式对象应用到同一元素

<div v-bind:style="[styleObjectA,styleObjectB]"></div>

const vm = new Vue({el: "#app",data: {styleObjectA: {fontSize: '300px'},styleObjectB: {color: 'red'}}
})

【结果】

【注】

自动添加前缀：绑定style时，使用需要添加浏览器引擎前缀的css属性时，如transform，Vue.js会自动侦测并添加相应的前缀
多重值：从2.3.0起，可以为style绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

【结果】谷歌浏览器打开后元素如下，该种写法只会渲染数组中最后一个被浏览器支持的值。

3.修饰符

1) .camel

由于绑定特性时，会将大写字母转换为小写字母，如下例

<svg :viewBox='viewBox'></svg>

const vm = new Vue({el: "#app",data: {viewBox:'0 0 100 100'}
})

【结果】

因此，Vue提供了v-bind修饰符camel，该修饰符允许在使用DOM模板时将v-bind属性名称驼峰化，如下

<svg :view-box.camel='viewBox'></svg>

2) .prop

用于绑定DOM属性（property）

<div v-bind:text-content.prop="text"></div>

const vm = new Vue({el: "#app",data: {text:'智者不如爱河'}
})

【结果】

Vue指令篇_v-bind相关推荐

Vue指令篇_v-model_数据双向绑定
目录 1.input 1)type = text(文本框) 2)type = checkbox 复选框 3)type = radio 单选框 2.textarea 3.select 4.v-model ...
Vue指令篇_v-for_列表渲染
今天要写的是Vue很香的一个指令v-for,这个指令在结构中实现循环,基于数据多次渲染元素,在减少代码量的情况下,又使得逻辑关系一目了然,很奈斯.不多说啦,就开始吧. 目录 1.使用方法 1)v-fo ...
Vue指令篇_v-if、v-else、v-else-if
目录 1.v-if 2.v-else 3.v-else-if 4.v-show 5.v-if 和 v-show 比较 1.v-if 作用:条件性的渲染一块内容,这块内容只会在指令的表达式为真值时被渲染 ...
VUE指令篇_不常用指令
标题没错,就是几个不常用指令,T_T,先来说一下什么是指令,vue的指令是指以 v- 为前缀,具有特殊含义.拥有特殊功能的特性,可以直接使用data中的数据 1.v-pre v-pre的作用是跳过这个 ...
Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
vue学习篇--02内置指令计算属性侦听属性
文章目录 18个指令 v-text v-html: v-show: v-if: v-for: 可以遍历数组对象数字字符串 v-bind: 解析属性:title src href type alt ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
vue-cli3.0（创建项目）如何引入element-ui（指令篇）
vue-cli3.0新创建的项目,如何引入element-ui? 原文地址:点击查看 vuejs官方地址:了解详情操作前请注意: 将代码备份,因为在你引入之后,cli3.0项目可能会在你的配置下重写 ...
Vue实战篇一：使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...

Vue指令篇_v-bind

1.基本用法

2.class和style的绑定

1）绑定class

2）绑定style

3.修饰符

1) .camel

2) .prop

Vue指令篇_v-bind相关推荐

最新文章

热门文章