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指令的更多相关文章

  1. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  2. vue学习-day02（自定义指令，生命周期）

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  3. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  4. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  5. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

  6. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  7. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

  8. Vue学习五：v-for指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  9. Vue学习二：v-model指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...

随机推荐

  1. html+css知识点以及常见的坑

    float 与 绝对定位 共同点:都脱离文档流,不占用原来的位置,后面的内容占有位置 不同点: float后者居上,补齐,且只能在父级盒子内活动,且不能浮动在照片上. 绝对定位脱离文档流后,直接漂浮到 ...

  2. CodeQL CLI入门

    一.CodeQL CLI 安装和配置 1.下载CodeQL CLI 压缩包 https://github.com/github/codeql-cli-binaries/releases 2.创建Cod ...

  3. 更好地使用google

    精确搜索:双引号 精确搜索就是在你要搜索的词上,加上双引号,这时google就会完全的匹配你所要搜索的字符串 "今日黄瓜" 站内搜索:site 例如我想在stackoverflow ...

  4. js实现树级递归，通过js生成tree树形菜单(递归算法)

    方法封装: /** * 数据转换为树形(递归),示例:toTreeByRecursion(source, 'id', 'parentId', null, 'children') * @param {A ...

  5. C++ strcmp与strncmp的比较

    C++ strcmp与strncmp的比较(转载)  原文链接:https://www.cnblogs.com/ybqjymy/p/12565444.html strcmp与strncmp都是用来比较 ...

  6. 关于windou环境下使用http或者ftp搭建网络hu共享

    第一步 右键此电脑进入控制面 第二步:进入程序点击启用或关闭windous功能 第三步进入服务开启界面 点击让windows更新为你下载文件,并保存更改完,然后关闭 四:邮件我的电脑进入管理 四右键添 ...

  7. 1. 不吹不擂，第一篇就能提升你对Bean Validation数据校验的认知

    乔丹是我听过的篮球之神,科比是我亲眼见过的篮球之神.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免 ...

  8. MySQL锁这块石头似乎没有我想的那么重

    前言 前言为本人写这篇文章的牢骚,建议跳过不看.   之前好几次都想好好的学习MySQL中的锁,但是找了几篇文章,看了一些锁的类型有那么多种,一时间也没看懂是什么意思,于是跟自己说先放松下自己,便从书 ...

  9. 利用Python爬虫刷新某网站访问量

    前言:前一段时间看到有博友写了爬虫去刷新博客访问量一篇文章,当时还觉得蛮有意思的,就保存了一下,但是当我昨天准备复现的时候居然发现文章404了.所以本篇文章仅供学习交流,严禁用于商业用途 很多人学习p ...

  10. 【Android】Android开发点击查看手机电量的小功能。学习广播的一个小技能小Demo

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 微博:http://weibo.com/mcxiaobing 首先给大家看一下效果图: 先写一个广播类 ...