v-bind

- style绑定

- class绑定

- 属性值绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>v-bind:</title>

    <style>

        .x {background: blue}

        .y {font-size: 30px}

        .z {color: pink}

    </style>

</head>

<body>

<div id="app">

    <h1>bind: class</h1>

    <div class="x" :class="[class1,class2,{z:true}]">maomao</div>

    <h1>bind: style</h1>

    <p :style="[style1,style2,{fontSize:'30px'}]">have a test p</p>

    <p style="background-color:lavenderblush;">hello world</p>

    <p :style="[style0,]">hello world</p>

    <h2>属性值: 链接/图片</h2>

    <a :href="baiduUrl">baidu.com</a>

    <img :src="imageUrl" alt="">

</div>

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

<script>

    let vm = new Vue({

        el: "#app",

        data: {

            msg: false,

            //属性绑定

            baiduUrl: 'https://www.baidu.com',

            imageUrl: 'http://t.cn/R3GPvKW',

            //bind-style

            style0: {color: 'lavender',},

            style1: {background: 'pink',},

            style2: {color: 'white',},

            // bind-class

            class1: 'x',

            class2: 'y',

        }

    })

</script>

</body>

</html>

[vue]v-bind: sytle/class-bind&属性值绑定的更多相关文章

  1. SpringMVC(六)：@RequestMapping下使用@RequestHeader绑定请求报头的属性值、@CookieValue绑定请求中的Cookie值

    备注:我本地浏览器的报头(Request Header)信息如下: Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image ...

  2. 外部配置属性值是如何被绑定到XxxProperties类属性上的？--SpringBoot源码（五）

    注:该源码分析对应SpringBoot版本为2.1.0.RELEASE 1 前言 本篇接 SpringBoot是如何实现自动配置的?--SpringBoot源码(四) 温故而知新,我们来简单回顾一下上 ...

  3. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  4. 【SpringMVC】SpringMVC系列5之@RequestHeader 映射请求头属性值

    5.@RequestHeader 映射请求头属性值 5.1.概述 请求头包含了若干个属性,服务器可据此获知客户端的信息,通过 @RequestHeader 即可将请求头中的属性值绑定到处理方法的入参中 ...

  5. vue基础----自定义组件directive ,bind,update,insert

    <div id="app"> <input type="text" v-limit.3="msg" v-focus> ...

  6. params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

    params.row[params.column.key] vue h函数 当前单元格 h函数 div 属性 值或数组 render

  7. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  8. vue修改对象的属性值后页面不重新渲染

    原文地址:vue修改对象的属性值后页面不重新渲染 最近项目在使用vue,遇到几次修改了对象的属性后,页面并不重新渲染,场景如下: HTML页面如下: [html] view plain copy &l ...

  9. vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

随机推荐

  1. luanet分布式lua框架

    luanet最初只是一个网络框架,它简单的封装了一些网络相关接口然后暴露到lua中,让lua可以构建简单的网络应用. 随着我的手游服务器的开发,我发现在C语言中要实现一个简洁易用的RPC调用接口并不容 ...

  2. 【EF框架异常】System.MissingMethodException:“找不到方法:“System.Data.Entity.ModelConfiguration.Configuration.PrimitivePropertyConfiguration

    最近调试EF的时候遇到下面这个问题 System.MissingMethodException:“找不到方法:“System.Data.Entity.ModelConfiguration.Config ...

  3. MapReduce模型探究--总览

    先从宏观上了解一下MR运行机制. 两个干活的: (1)jobtracher:管理和调度job (2)tasktracher: 执行job划分后的task client提交MR作业后,jobtrache ...

  4. 【大数据系列】windows环境下搭建hadoop开发环境使用api进行基本操作

    前言 搭建完hadoop集群之后在windows环境下搭建java项目进行测试 操作hdfs中的文件 版本一 package com.slp.hadoop274.hdfs; import java.i ...

  5. Promise 必知必会的面试题

    Promise 想必大家都十分熟悉,想想就那么几个 api,可是你真的了解 Promise 吗?本文根据 Promise 的一些知识点总结了十道题,看看你能做对几道. 以下 promise 均指代 P ...

  6. office excel Query 功能

    Microsoft Query 合并查询 Excel 2016 默认已集成 Power Query 功能

  7. [原]git的使用(五)---删除文件

    9.删除文件 [实践出真知] 创建test.txt 文件  并add 和commit到仓库 $ git status #新增加的文件test.txt On branch master Untracke ...

  8. This dependency was not found: * !!vue-style-loader!css-loader?……解决方案

    1.新建一个vue项目时,需要重新安装stylus 报错 This dependency was not found: * !!vue-style-loader!css-loader?{"m ...

  9. s3cmd在配置后使用时提示ERROR: S3 error: 403 (InvalidAccessKeyId): The AWS Access Key Id you provided does not exist in our records.

    自己新建的ceph环境,下载了s3cmd来做客户端,使用了s3cmd --configure配置后,在使用s3cmd ls可以查看到所有的bucket,但s3cmd ls s3://xxx 具体buc ...

  10. OC开发_整理笔记——多线程之GCD

    一.进程和线程   二.各种队列! 1.GCD:Grand Central Dispatch 2.串行队列(Serial)      你可以创建任意个数的串行队列,每个队列依次执行添加的任务,一个队列 ...