Vue指令之v-bind

v-bind指令是专门操作属性的指令，什么是属性？例如设置图片是

Vue指令之v-bind

1.如何使用v-bind指令

2.v-bind设置类名

3.v-bind简写

4.总结

src，设置鼠标悬停的文本是title，还有类class等。

其实元素的属性有很多中，都是写在元素的内部。那该如何设置属性呢，v-bind该如何使用呢？

1.如何使用v-bind指令

语法是v-bind:属性名=表达式

固定写法：

<img src="图片地址"/>

那要设置属性就是这么写(v-bind写法)，图片的src属性的值就是在data中定义的imgSrc的值

<body><div id="app"><img src="图片地址"/><img v-bind:src="imgSrc"/></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var  app = new Vue({el:"#app",data:{imgSrc:'图片地址'}})</script></body>

2.v-bind设置类名

假设img的class为active，那么使用v-bind设置类名属性，使得active生效可以利用三元表达式，如果isActive为真就设置active，如果isActive为假就设置为空。

<img class="active"/>
<img v-bind:class="isActive?'active':''"/>

三元表达式看起来表达式，代码有点多，还有另一种写法，对象的写法

<img v-bind:class="{active:isActive}"/>

active类名是否生效，取决于isActive的值，如果isActive为真active就生效，如果isActive为假就不生效。

3.v-bind简写

<img :src="imgSrc"/>
<img :class="isActive?'active':''"/>
<img :class="{active:isActive}"/>

4.总结

v-bind指令的作用是为元素绑定属性
语法是v-bind:属性名
简写可以省略v-bind只保留:属性名
需要动态的添加class建议使用对象的方式

Vue指令之v-bind相关推荐

vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
Vue指令超详细演示理解
一:插值表达式将data中定义的数据显示到模板上. 在vue中{{ }}语法,叫做:插值表达式,大白话就是输出{{ }}中的表达式的值的语法. 把{{ }} 理解为一个占位符(一个坑), {{ ms ...
Vue指令实现数字增长动画？
vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现. Vue.directive('countRunning', {bind(el) {let timer = null; ...
vue指令以及dom操作
"AngularJS 通过被称为指令的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触&qu ...
Vue指令之自定义指令
自定义指令在每个vue组件中,可以在directives节点下声明私有自定义指令钩子函数 bind:只调用一次,指令第一次绑定到元素时调用.在这里进行一次性的初始化设置 inserted:被绑定元 ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...

Vue指令之v-bind

Vue指令之v-bind

1.如何使用v-bind指令

2.v-bind设置类名

3.v-bind简写

4.总结

Vue指令之v-bind相关推荐

最新文章

热门文章