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. 7.深入k8s：任务调用Job与CronJob及源码分析

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 在使用job中,我会结合源码进行一定的讲解,我们也可以从源码中一窥究竟,一些细节k8s是 ...

  2. Java算法——分治法

         一.基本概念 在计算机科学中,分治法是一种很重要的算法.字面上的解释是“分而治之”,就是把一个复杂的问题分成两个或更多的相同或相似的子问题,再把子问题分成更小的子问题……直到最后子问题可以简 ...

  3. [Redhat虚拟机安装][VirtualBox][NET:Registered protocol family 2]

    错误情况 今晚试着用VirtualBox虚拟机安装RedHat,但是安装过程中一直卡在一个NET:Registered protocol family 2这个地方. 错误截图 情况如下图所示: 解决方 ...

  4. IDEA实用插件推荐及使用方法详解

    当前使用的IDEA版本是2020.1.随着IDEA版本的升级,有些插件不再支持,而有些插件变成了收费插件,这些插件将不再推荐.以下列举的,都是亲测可以在2020.1版本的IDEA中使用的插件. Tra ...

  5. 从零开始的SpringBoot项目 ( 八 ) 实现基于Token的用户身份验证

    1.首先了解一下Token uid: 用户唯一身份标识 time: 当前时间的时间戳 sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串,以防止第三方恶意拼接 固定参数(可 ...

  6. 漏洞重温之sql注入（五）

    漏洞重温之sql注入(五) sqli-labs通关之旅 填坑来了! Less-17 首先,17关,我们先查看一下页面,发现网页正中间是一个登录框. 显然,该关卡的注入应该为post型. 直接查看源码. ...

  7. 解析WAV音频文件----》生成WAV音频文件头

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i WAV音频文件介绍: WAV文件是在PC机平台上很常见的.最经典的多媒体音频文件,最早于1991年8月出现在Windows3.1操作系统 ...

  8. java基础语法(二)

    一.运算符 算数运算符 算数运算符用在数学表达式中,它们的作用和在数学中的作用一样. 操作符 描述 例子 + 两数相加 1+1=2 - 两数相减 2-1=1 * 两数相乘 1*1=1 / 两数相除 1 ...

  9. List集合对象去重及按属性去重的8种方法-java基础总结系列第六篇

    最近在写一些关于java基础的文章,但是我又不想按照教科书的方式去写知识点的文章,因为意义不大.基础知识太多了,如何将这些知识归纳总结,总结出优缺点或者是使用场景才是对知识的升华.所以我更想把java ...

  10. Spring源码学习（六）-spring初始化回调方法源码学习

    1.spring官方指定了三种初始化回调方法 1.1.@PostConstruct.@PreDestory 1.2.实现 InitializingBean DisposableBean 接口 1.3. ...