代码结构

一、     v-bind基本使用

1、效果

2、代码

01-v-bind基本使用.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>01-v-bind基本使用</title>

</head>

<body>

<div id="app">

 <div>

	 <img v-bind:src="imgSrc"  >

 </div>

  <div>

	  <a v-bind:href="link">百度</a>

  </div>

  -------------如下是简写-----------

  <!--简写-->

  <div>

	   <img :src="imgSrc"  >

  </div>

  <div>

  	  <a :href="link">百度</a>

  </div>

</div>

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

    	imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',

        link:   'https://www.baidu.com'

    }

  })

</script>

</body>

</html>

二、     绑定class属性

1、 效果

2、代码

02-绑定class属性.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>02-绑定class属性</title>

  <style>

    .active {

      color: red;

    }

  </style>

</head>

<body>

<div id="app">

  <h2 :class="{'active': isActive}">hello world!</h2>

</div>

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

      isActive: true

    }

  })

</script>

</body>

</html>

三、绑定class属性(综合练习)

1、效果

点击哪一行，哪一行变成红色

1、 代码

03-绑定class属性(综合练习).html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>03-绑定class属性(综合练习)</title>

  <style>

    .active {

      color: red;

    }

  </style>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="(item, index) in movies"

        :class="{active: index===currentIndex}"

        @click="itemClick(index)">

     {{index}} {{item}}

    </li>

  </ul>

</div>

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

    	movies: ['三国演义', '红楼梦', '西游记', '水浒传'],

        currentIndex: 0

    },

    methods: {

    	itemClick(index) {

    		this.currentIndex = index

      }

    }

  })

</script>

</body>

</html>

四、绑定class属性(扩展)

1、     效果

绑定多个class

2代码

04-绑定class属性(扩展).html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>04-绑定class属性(扩展)</title>

  <style>

    .line {

      text-decoration: underline;

    }

    .active {

      color: red;

    }

    .large {

      font-size: 40px;

    }

  </style>

</head>

<body>

<div id="app">

  <h2 :class="{line: isLine, active: isActive}">hello world</h2>

  <h2  class="large" :class="{line: isLine, active: isActive}">hello world</h2>

  <h2  class="large"  :class="['active', 'line']">hello world</h2>

</div>

<script src="vue.js"></script>

<script>

  let app = new Vue({

    el: '#app',

    data: {

    	isLine: true,

		isActive: true

    }

  })

</script>

</body>

</html>

五、绑定style属性(对象)

1、效果

绑定单个或者多个style属性

2、代码

05-绑定style属性(对象).html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>05-绑定style属性(对象)</title>

</head>

<body>

<div id="app">

  <h2 :style="{color: dColor, fontSize: dFontSize + 'px'}">hello world</h2>

  <h2 :style="objStyle">hello world</h2>

  <h2 :style="[objStyle1, objStyle2]">hello world</h2>

</div>

<script src="vue.js"></script>

<script>

    let vm = new Vue({

        el: '#app',

        data: {

			dColor: 'red',

			dFontSize: 50,

			objStyle: {

				color: 'red',

				fontSize: '60px'

			},

			objStyle1: {

				fontSize: '80px',

				color: 'green'

			},

			objStyle2: {

				textDecoration: 'underline'

			}

        }

    })

</script>

</body>

</html>

<vue 基础知识 3、v-bind使用>的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Centos、openEuler OS更改源地址

    1.配置openEuler软件源仓库 注:以openEuler OS为例,Centos OS相似 vim /etc/yum.repos.d/openEuler.repo 2.常用的源地址 #华为源: ...

  2. HelloJs

    JS 轻量级脚本语言,也是嵌入式语言,是一种对啊想模型语言,简称JS 想要实现复杂的效果,得依靠宿主环境提供API,最常见的是浏览器,还有服务器环境(操作系统) 语言机构+宿主环境提供的API 写js ...

  3. Fragment动态添加与管理

    activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...

  4. 项目实战接口开发SpringBoot

    目录 一.springboot官方demo开发 二.使用SpringBoot开发get方法接口 三.一个要求携带cookie信息访问的get接口开发 四.需要携带参数的get请求两种开发方式 4.1 ...

  5. Head First Java学习：第十一章-异常处理

    第十一章 异常处理 1.方法可以抓住其他方法所抛出的异常:异常总是丢回给调用方 有风险.会抛出异常的程序代码: 负责声明异常:创建Exception对象并抛出 调用该方法的程序代码: 在try中调用程 ...

  6. Socket编程和实现聊天室

    一.HTTP协议的socket通信 1.server.py # 服务端 import sys import socket ip_point = ('127.0.0.1',9999) sk = sock ...

  7. leetcode:354 俄罗斯套娃信封问题(LIS)

    解题思路: 根据题意,不难发现组合的元素,他们的长宽都是单调递增的,因此可以转化为最长上升子序列问题. 首先按照长度从小到大对信封进行排序,长度相同,按照宽度从大到小进行排序.因为当长度相同,因为可能 ...

  8. 江西财经大学第一届程序设计竞赛 H题- 小P的数学问题

    题目链接:https://www.nowcoder.com/acm/contest/115/H 解题思路:分块打表!!! 什么是分块打表呢??? 从这道题我们知道我们要找到最多1*e9的阶乘 那循环暴 ...

  9. RIPEMD加密算法：原理、应用与安全性

    一.引言 在信息时代,数据安全愈发受到重视,加密算法作为保障信息安全的关键技术,其性能和安全性备受关注.RIPEMD(RACE Integrity Primitives Evaluation Mess ...

  10. ASR项目实战-产品分析

    分析Google.讯飞.百度.阿里.QQ.搜狗等大厂的ASR服务,可以罗列出一款ASR服务所需要具备的能力. 产品分类 ASR云服务产品,从用户体验.时效性.音频时长,可以划分为如下几类: 实时短音频 ...