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. .net 将DLL程序集生成到指定目录中

    .在程序集右键属性 .在程序集属性界面中找到生成事件 在预先生成事件命令行添加: IF NOT EXIST "$(ProjectDir)..\Bin" MD "$(Pro ...

  2. 机器学习实战-KNN

    KNN算法很简单,大致的工作原理是:给定训练数据样本和标签,对于某测试的一个样本数据,选择距离其最近的k个训练样本,这k个训练样本中所属类别最多的类即为该测试样本的预测标签.简称kNN.通常k是不大于 ...

  3. css方法 - 移动端reset汇总与注释

    1.解决移动端触摸a元素,会有蓝色阴影 正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit- ...

  4. Maven —— scope 元素的值及其含义

    1.compile 缺省值,所属依赖在所有的classpath中可用,同时它们也会被打包(随着项目一起发布). 2.provided 只有当JDK或者某个容器已提供该依赖之后才使用.如servlet. ...

  5. js json转字符串

    在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.例如:JSON字符串:var str1 = '{ &quo ...

  6. WinDbg远程调试unable to initialize target machine information win32 error 0n87

    Debugging Target:Windows XP SP3 32-bit Debugging Host:Windows Server 2012 64-bit 当附加到目标服务器某个进程后,WinD ...

  7. 更新jenkins插件，报错 Perhaps you need to run your container with "-Djava.awt.headless=true"?

    Configuring the Java environment variables vi ~/.bash_profile 在最后一行加入: export JAVA_OPTS=-Djava.awt.h ...

  8. sprint boot 配置

    来源:https://docs.spring.io/spring-boot/docs/current-SNAPSHOT/reference/htmlsingle/#howto-configure-to ...

  9. lombok 一个不错的小工具

    (1)官方文档  Lombok features (2)Lombok Reduces Your Boilerplate Code (3)Lombok-Java代码自动生成 开发利器

  10. R子集subset

    > x<-c(6,1,2,3,NA,12) > x[x>5]    #x[5]是未知的,因此其值是否大于5也是未知的 [1]  6 NA 12 > subset(x,x& ...