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. Qt5 教程

    序 Qt 前言 Hello, world! 信号槽 自定义信号槽 Qt 模块简介 MainWindow 简介 添加动作 资源文件 对象模型 布局管理器 菜单栏.工具栏和状态栏 对话框简介 对话框数据传 ...

  2. 【python】flask 开启 debug 模式

    方法一: 直接在run的时候添加debug from flask import Flask app = Flask(__name__) @app.route('/') def hello_world( ...

  3. js - 预加载+监听图片资源加载制作进度条

    这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图 本 ...

  4. 二叉树的实现(Java语言描述)

    实现二叉树   并先序遍历之. package 二叉树的实现; public class BinaryTree<T> { class Node { int value; // 该节点存储的 ...

  5. KMP算法的实现(Java语言描述)

    标签:it KMP算法是模式匹配专用算法. 它是在已知模式串的next或nextval数组的基础上执行的.如果不知道它们二者之一,就没法使用KMP算法,因此我们需要计算它们. KMP算法由两部分组成: ...

  6. SSL延迟有多大？

    http://www.ruanyifeng.com/blog/2014/09/ssl-latency.html 作者: 阮一峰 日期: 2014年9月24日 据说,Netscape公司当年设计SSL协 ...

  7. 使用 udev 管理 Linux 设备文件

    本文以通俗的方法阐述 udev 及相关术语的概念.udev 的配置文件和规则文件,然后以 Red Hat Enterprise Server 为平台演示一些管理设备文件和查询设备信息的实例.本文会使那 ...

  8. linux下php redis扩展安装

    sudo tar vxzf redis-2.2.7.tgz cd redis-2.2.7 执行sudo /data/service/php54/bin/phpize 在目录下生成配置文件 sudo . ...

  9. exml自动加载图片

    常规H5和微信小游戏同样有效 一.exml自动加载图片 有两张图片 图片未放入defatult.res.json的资源组里,未预先加载包含2张图片的资源组,仅仅在default.res.json里有图 ...

  10. 04 用户个人信息和二次开发django的文件存储系统

    用户的个人信息的前端页面如下: 业务逻辑分析 从上图中可以看出,需要后端传送的数据有,用户的名字和练习的地址,和最近的浏览记录. 用户的名字和联系的地址可以通过地址表(adress)中获得,地址表可以 ...