属性渲染

　　 关于标签的属性渲染统一使用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. python numpy数组操作

    数组的创建 import numpy as np arr1 = np.array([3,10,8,7,34,11,28,72]) arr2 = np.array(((8.5,6,4.1,2,0.7), ...

  2. jenkins，开源CI工具

    目前最热门CI工具的jenkins,学习笔记: 一.jenkins如何实现执行命令 1.执行jenkins同主机上的命令

  3. .Net MongoDB批量修改集合中子集合的字段

    环境:.Net Core 3.1 (需要导入.Net MongoDB的驱动) 模型 /// <summary> /// 收藏 /// </summary> public cla ...

  4. 这个爬虫JS逆向加密任务，你还不来试试？逆向入门级，适合一定爬虫基础的人

    友情提示:在博客园更新比较慢,有兴趣的关注知识图谱与大数据公众号吧.这次选择苏宁易购登录密码加密,如能调试出来代表你具备了一定的JS逆向能力,初学者建议跟着内容调试一波,尽量独自将JS代码抠出来,实在 ...

  5. 基于JSP+Servlet的学生信息管理系统

    JavaWeb期末项目,一个基于JSP和Servlet的学生信息管理系统实现,前端用了bootstrap和一些自定义的css样式,数据库用了mysql 传送门: GitHub 实现功能 登录(教师, ...

  6. android开发之java的一些基础知识详解，java编程语法，扎实自己的android基本功

    1.对象的初始化 (1)非静态对象的初始化 在创建对象时,对象所在类的所有数据成员会首先进行初始化. 基本类型:int型,初始化为0. 如果为对象:这些对象会按顺序初始化. ※在所有类成员初始化完成之 ...

  7. Android studio Debug 源码

    原来有的地方打不了断点 会提示no executable code at line xxx 源码sdk里有,sdkManager下好对应版本,然后使用对应版本的模拟器debug就行了 如果要debug ...

  8. python小白入门基础（三：整型）

    # Number(int float str complex) #int 整型(正整数 0 负整数)intvar_1 = 100print(intvar_1)invar_2 = 0 print(inv ...

  9. 石子合并（区间dp典型例题）

    Description 有n堆石子排成一行,每次选择相邻的两堆石子,将其合并为一堆,记录该次合并的得分为两堆石子个数之和.已知每堆石子的石子个数,求当所有石子合并为一堆时,最小的总得分. Input ...

  10. P1020 导弹拦截（nlogn求最长不下降子序列）

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...