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. 随心所欲玩复制 详解robocopy

    说实话,Windows系统自带的复制功能不仅功能简单,而且定制性也不强,每每在对大量文件进行复制.移动.备份时,总少不了繁杂往复的操作.不过幸好,微软意识到了这一点,为我们提供了一款很强力的复制备份工 ...

  2. 怎样用Windows10全屏流畅运行红色警戒2

    https://jingyan.baidu.com/article/9113f81b1cb7f22b3214c724.html jpg 转 rar 

  3. 自己实现atoi

    bool myatoi(const char *s,int &num) { cout<<(&s)<<endl; num=; while (*s) { ') { ...

  4. MyBatis学习之SpringMvc和MyBatis整合

    1. 整合流程 Dao层: 1. SqlMapConfig.xml,空文件即可,需要文件头. 2. applicationContext-dao.xml. a) 数据库连接池 b) SqlSessio ...

  5. libevent安装方法

    安装FastDFS之前,先安装libevent工具包,记录一下安装过程 1.检查:ls -al /usr/lib | grep libevent 查看是否已安装,如果已安装且版本低于1.3,则先通过: ...

  6. 遍历json数组实现树

    今天小颖在工作中遇到要遍历树得问题了,实现后,怕后期遇到又忘记啦,所以记录下嘻嘻,其实这个和小颖之前写过得一篇文章    json的那些事    中第4点有关json的面试题有些类似. 数组格式: v ...

  7. C# 创建txt文本

    1.创建txt文本 /// <summary> /// log日志,txt的 /// </summary> /// <param name="Log1" ...

  8. 23种设计模式之迭代器模式（Iterator）

    迭代器模式是一种对象的行为型模式,提供了一种方法来访问聚合对象,而不用暴露这个对象的内部表示.迭代器模式支持以不同的方式遍历一个聚合对象,复杂的聚合可用多种方法来进行遍历:允许在同一个聚合上可以有多个 ...

  9. Asp.Net MVC大型项目实践整合 NHibernate与Json序列化

    通过NHibernate我们多表查询是实现了 但由于查询出来的集合中的对象“不是平的”,如何在送到UI绑定成了问题.ExtJs UI组件的数据绑定支持多种格式,如简单数组,Json,Xml.在本项目中 ...

  10. Notepad++如何关闭最近打开的文件的历史记录功能

    Notepad++是Windows 操作系统下的一套非常有特色的自由软件的纯文字编辑器(许可证:GPL),有完整的中文化接口及支持多国语言编写的 功能(UTF8 技术).它的功能比Windows中的N ...