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. 使用VS Code写PHP并进行调试

    VS Code(Visual Studio Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器. 1.先从官网下载安装好VS Code.官方下载地址是https://code.visua ...

  2. WebService连接postgresql（ 失败尝试）

     一.先进行postgresql的配置 1. 安装ODBC驱动 下载地址:http://www.postgresql.org/ftp/odbc/versions/msi/ 2. 打开 控制面板 -&g ...

  3. C# EF中调用 存储过程并调回参数

    TourEntities db = new TourEntities(); List<v_product> v = new List<v_product>(); SqlPara ...

  4. Python tkinter 控件更新信息

    下面几个例子关于tkinter界面更新的,简单易懂,分享一下. 例子_1: 代码_1: from tkinter import Tk, Checkbutton, Label from tkinter ...

  5. WebApp与Native App有何区别

    转:http://blog.sina.com.cn/s/blog_5f2df1e401018hjj.html 今天看的一篇关于html5的Web App与Native App的技术分析,真的很棒分享一 ...

  6. Artech的MVC4框架学习——第三章controller的激活

    第一当目标controller的名称通过URL路由被解析出来后,asp.net mvc利用 ControllerBuilder 注册 ControllerFactory ,根据名称实现对目标contr ...

  7. Android.mk 用法介绍

    一个Android.mk file用来向编译系统描述你的源代码.具体来说:该文件是GNU Makefile的一小部分,会被编译系统解析一次或多次.你可以在每一个Android.mk file中定义一个 ...

  8. 使用nginx做反代时遇到413 Request Entity Too Large的解决方法

    在使用nginx做反向代理的时候,被反代的系统在上传文件的时候遇到413 错误 :Request Entity Too Large 原因是nginx限制了上传文件的大小,在nginx中可以配置最大允许 ...

  9. virgo-tomcat-server最大并发连接数的修改

    首先,我们如果需要修改tomcat 7的最大连接数,我们可以去tomcat官方网站,查看Documentation 进入tomcat的官方网站http://tomcat.apache.org我们点击左 ...

  10. Android ActivityManager与WindowManager

    <uses-permission android:name="android.permission.GET_TASKS" /> <uses-permission ...