属性渲染

　　 关于标签的属性渲染统一使用v-bind属性指令，比如轮播图的src全部经过后端获得，所以我们需要对src属性做动态渲染。

基本使用

　　 使用v-bind属性指令，动态绑定图片的地址。

　　

<body>

    <main id="id-1">

        <img v-bind:src="imgSrc">

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            imgSrc: "./1.jpg",

        }

    })

</script>

简写形式

　　 可以直接使用:进行简写。

<body>

    <main id="id-1">

        <img :src="imgSrc">

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            imgSrc: "./1.jpg",

        }

    })

</script>

class对象

　　 我们可以通过v-bind与对象，动态绑定标签的class属性。

　　 注意它的格式是这样的：

<div :class={c1:true,c2:false,c3:true}>内容</div>

　　 当class中的某一个对象的属性为true时，则代表该class被添加。

　　 并且我们还可以使用正常的class=类名来定制不变的类。

　　

<body>

    <main id="id-1">

        <div :class={c1:isC1,c2:isC2,c3:isC3} class="show">内容</div>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            isC1:true,

            isC2:false,

            isC3:true,

        }

    })

</script>

class数组

　　 添加class除开可以用对象的形式，也可以使用数组。

　　 不过数组使用很少，一般不怎么用。

　　 它的语法格式如下：

<div :class=[c1,c2,c3]>内容</div>

<!-- 注意，当数组内的元素没有加引号是会认为是一个变量，会去数据层寻找 -->

<!-- 如果数组内的元素加上引号，则被认位是一个字符串 -->

　　

　　 下面是不加引号，当作变量去寻找。

　　

<body>

    <main id="id-1">

        <div :class=[c1,c2,c3] class="show">内容</div>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            c1:"c1Style",

            c2:"c2Style",

            c3:"c3Style",

        }

    })

</script>

　　

　　 下面是加引号，直接会作用于标签本身。

　　

<body>

    <main id="id-1">

        <div :class=['c1','c2','c3'] class="show">内容</div>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            c1:"c1Style",

            c2:"c2Style",

            c3:"c3Style",

        }

    })

</script>

style对象

　　 我们可以通过v-bind与对象，动态绑定标签的style属性。

　　 它有两种书写style的方式，一种是驼峰式，一种是通过-来进行链接。

　　 注意它的格式是这样的：

<div :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</div>

<!-- 注意!最后的background没有添加单引号，这使得bgColor会当作变量去数据层中获取 -->

　　

<body>

    <main id="id-1">

        <div :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</div>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            bgColor: "green",

        }

    })

</script>

style数组

　　 除开可以使用对象语法绑定style属性，也可以通过数组语法进行绑定。

　　 数组中的元素必定要是数据层中的数据。

　　

<body>

    <main id="id-1">

        <div :style=[fSize,color]>内容</div>

    </main>

</body>

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>

<script>

    "use strict";

    const v1 = new Vue({

        el: "#id-1",

        data: {

            fSize:{"fontSize":"16px"},

            color:{"backgroundColor":"green","color":"white"},

        }

    })

</script>

Vue 属性渲染的更多相关文章

  1. vue服务器端渲染指南研究

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...

  2. Vue视图渲染原理解析，从构建VNode到生成真实节点树

    前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...

  3. vue.js 渲染完成回调

    vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...

  4. Vue条件渲染

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...

  5. vue 数组渲染问题

    vue 数组渲染问题 问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...

  6. vue 避免渲染时闪烁

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  8. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  9. vue render 渲染函数

    vue render 渲染函数 经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

随机推荐

  1. IdentityServer4网页(单点)登陆入门

    前言 本篇说说ids中的网页登陆以及单点登陆的大致原理,主要是以基本跑通为目的,下一篇开始会详细说明集成ids网页登陆原理. 最好先熟悉以下知识: asp.net core asp.net core的 ...

  2. 发布 npm遇到的问题

    npm publish 遇到 403 怎么办? 这说明你没有切换到 npm 原始源,那么你只需要用 npm config delete registry 删除淘宝源,然后再 publish. publ ...

  3. IntelliJ IDEA 2019 的安装与破解

    IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具,尤其在智能代码助手.代码自动提示.重构.J2EE支持.各类版本工具( ...

  4. 【新鲜出炉的个人项目】基于 Flink 的商品推荐系统

    FlinkCommodityRecommendationSystem Recs FlinkCommodityRecommendationSystem(基于 Flink 的商品推荐系统) 1. 前言 系 ...

  5. Spring Cloud系列（一）：微服务架构简介

    一.微服务概述 1.微服务是什么 微服务架构的核心就是服务的拆分,把传统的单体式应用,根据一定的维度(比如业务)拆分为一个一个的服务,每一个服务都有自身特定的功能,又都能够独立的部署,甚至可以拥有自己 ...

  6. 广州做假证c

    广州做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...

  7. 轮廓线DP

    轮廓线DP ​ 刚刚学了轮廓线DP,想了好久才懂. ​ 我的理解就是用一条线的状态去更新另一条线的状态,然后将格子填满. ​ 图中正方形即是要填东西(根据题意)的格子,红线的状态是由黑线转移过来的. ...

  8. Spring Cloud：Consul基础知识

    一.基本概念 Consul是一套开源的分布式服务发现和配置管理系统,由HashiCorp公司用Go开发. 它提供微服务系统中的服务治理.配置中心.控制总线等功能. 服务发现:提供HTTP和DNS两种发 ...

  9. Arbitrary-Oriented Object Detection with Circular Smooth Label（ECCV2020，旋转目标检测）

    论文链接:https://arxiv.org/abs/2003.05597 code:https://github.com/Thinklab-SJTU/CSL_RetinaNet_Tensorflow ...

  10. The Triangle (简单动态规划)

    7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure 1 shows a number triangle. Write a program that calc ...