vue学习08 v-bind指令
vue学习08 v-bind指令
v-bind指令的作用是为元素绑定属性
完整写法是v-bind:属性名,可简写为:属性名
练习代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind</title>
</head>
<style>
.active{
border:1px solid red;
}
</style>
<body>
<!-- v-bind 为元素绑定属性 :是简写 -->
<div id="app">
<img v-bind:src="imgSrc" alt=""><br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="isActive? 'active':''" @click="toggleActive">
<br>
<img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
:class="{active:isActive}" @click="toggleActive">
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
imgSrc: "images/123.jpg",
imgTitle:"侠客小飞喜欢学vue!",
isActive: false
},
methods: {
toggleActive: function() {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
运行效果为:
vue学习08 v-bind指令的更多相关文章
- Vue学习系列(三)——基本指令
前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...
- vue学习-day02(自定义指令,生命周期)
目录: 1.案例:品牌管理 2.Vue-devtools的两种安装方式 3.过滤器,自定义全局或私有过滤器 4.鼠标按键事件的修饰符 5.自定义全局指令:让文本框获取焦点 ...
- Vue学习之路5-v-model指令
1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...
- Vue学习之路4-v-bind指令
1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...
- vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点
需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...
- Vue学习之路8-v-on指令学习简单事件绑定之属性
前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...
- Vue学习之路7-v-on指令学习之简单事件绑定
前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...
- Vue学习五:v-for指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- Vue学习二:v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
随机推荐
- neighbor和neigh_modify(转载)
(转载:http://blog.sina.com.cn/s/blog_b48a7ac30102w4mg.html###) 以下取自:http://simulation.haotui.com/viewt ...
- muduo源码解析7-countdownlatch类
countdownlatch class countdownlatch:noncopyable { }; 作用: countdownlatch和mutex,condition一样,用于线程之间的同步, ...
- 如何简洁优雅地部署PostgreSQL和Pgweb?
本文转自Rancher Labs 介绍PostgreSQL和Pgweb PostgreSQL是一款以可靠性和性能为人所熟知的开源数据库.它在很多行业和应用程序中都有应用,尤其是web开发人员的最爱.从 ...
- 8个必备的Python GUI库
Python GUI 库有很多,下面给大家罗列常用的几种 GUI 库.下面介绍的这些GUI框架,能满足大部分开发人员的需要,你可以根据自己的需求,选择合适的GUI库. 很多人学习python,不知道从 ...
- Rakefile
Rakefile https://www.jianshu.com/p/b18a6e42455a RAKE – Ruby Make http://docs.seattlerb.org/rake/ bun ...
- spring cloud 路由
Spring Cloud Feign:用于微服务之间,只映射内网ip Spring Cloud Gateway:用于服务端,对外开放的接口,对外统一访问gateway映射的ip 是这样吗? 但是这样权 ...
- IntelliJ IDEA远程Debug Linux的Java程序,找问题不要只会看日志了
1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! 我们习惯于在本地开发的时候debug,能快速定位与解决问题,那部署在服务器上是不是就没有办法了呢?只能通过查看日志来定位? ...
- 跟着兄弟连系统学习Linux-【day03】
day03-20200529 p10.学习注意事项 linux严格区分大小写(与python有点像) Linux中所有内容都是通过文件形式保存,通过命令执行设置参数,写 ...
- 把Employees显示在页面上
项目代码下载:https://files.cnblogs.com/files/xiandedanteng/gatling20200429-1.zip 需求:从后台DB取出雇员数据,显示在前台页面上: ...
- Java原生网络编程
一些常见术语 编程中的Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面 ...