1-3.vue指令:v-bind指令

v-bind的作用

v-bind的主要作用是用来绑定标签里面的属性值，如标签里面的href的值，class里面需要添加的一些class,style里面要添加的一些样式等

v-bind的语法糖

语法糖的含义就是对某个内容的简写，v-bind的语法糖为":"。

v-bind的基本使用

1.代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src='../js/vue.js'></script><title>Document</title>
</head><body><div id='app'><!-- v-bind绑定a标签的href属性 --><a v-bind:href="aHref">点击跳转</a><!-- v-bind的语法糖的书写 --><a :href="aHref">点击跳转</a></div><script>const app = new Vue({el: '#app',data: {aHref: 'www.baidu.com'}});</script></body></html>

2.步骤分解

v-bind动态绑定class或style属性

1.语法书写

    <h2 v-bind:class="{class名：boolean值，class名：boolean值}"></h2><h2 :class="{class名：boolean值，class名：boolean值}"></h2><h2 v-bind:style="{属性名：属性值，属性名：属性值}"></h2><h2 :style="{属性名：属性值，属性名：属性值}"></h2>

2.代码展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src='../js/vue.js'></script><title>Document</title>
</head>
<style>.colorshow {color:red;}.fontshow {font-size: 20px;}
</style><body><div id='app'><!-- <h2 v-bind:class="{class名：boolean值，class名：boolean值}"></h2> --><!-- <h2 :class="{class名：boolean值，class名：boolean值}"></h2> --><h2 :class="{colorshow: isColor, fontshow: isFont}">{{message}}</h2></div><script>const app = new Vue({el: '#app',data: {message: '展示v-bind如何动态绑定class属性',isColor: true,isFont: true}});</script></body></html>

3.步骤分解

4.简化

1-3.vue指令:v-bind指令相关推荐

前端进阶_狂神Vue笔记_语法指令v-bind、v-on、v-for_表单双绑_组件_Axios异步通信_Vue的生命周期_计算属性_插槽＜slot＞_webpack使用_vue-router路由
四.第一个Vue程序 4.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Si ...
Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
vue.js 四（指令和自定义指令）
官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...
【Vue】v-bind v-model指令的使用（实现计算器效果）
在Vue学习笔记(一)中,我们已经了解了Vue中的基本指令,比如 v-text,v-html,v-bind,v-on 等指令的使用,并且介绍了 MVVM 模式,那么怎么实现动态的在M和V之间数据传递呢 ...
Vue 混合、自定义指令、插件
vue的复用性与组合混合混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项 ...
vue给元素添加指令_Vue指令动态模糊元素
vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide eleme ...
【vue系列-04】vue的表单数据收集，基本指令和自定义指令
vue的表单数据收集.指令一,vue的核心属性 1,收集表单数据 1.1,收集数据案例 1.1.1,type类型的输入框 1.1.2,radio类型的单选框 1.1.3,checkbox类型的复选框 ...
Vue中常用的内置指令及自定义指令
内置指令 v-bind [单向数据绑定] [格式:v-bind:属性名="data中定义的属性"] [简写::属性名="data中定义的属性"] <div ...
vue自定义指令-加载指令v-loading和占位图指令v-showimg
了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中.inserted(){}:元素插入到DO ...
vue中如何自定义指令
目录一. 什么是自定义指令二. 如何自定义指令三.应用场景实现输入框防抖图片懒加载一键 Copy的功能拖拽下拉菜单相对时间转换一. 什么是自定义指令我们看到的v-开头的行内属性, ...

1-3.vue指令:v-bind指令

1-3.vue指令:v-bind指令

v-bind的作用

v-bind的语法糖

v-bind的基本使用

1.代码展示

2.步骤分解

v-bind动态绑定class或style属性

1.语法书写

2.代码展示

3.步骤分解

4.简化

1-3.vue指令:v-bind指令相关推荐

最新文章

热门文章