属性渲染

　　 关于标签的属性渲染统一使用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. Ubuntu 下查看CPU 信息命令

    from: http://hi.baidu.com/hermitinhistory/blog/item/ce64d5fb6b23b71b6d22eb95.html 查看当前操作系统内核信息 uname ...

  2. failed to resolve org.junit.platform

    IDEA提示:failed to resolve org.junit.platform,如下图 方法一:修改Maven镜像 D:\Program Files\apache-maven-3.6.3-pc ...

  3. py_递归实例：汉诺塔问题

    递归的两个特点 调用自身 结束条件 # _*_coding:utf-8 ''' 递归实例:汉诺塔问题 n----盘子总数 a----第一个柱子 b----第二个柱子 c----第三个柱子 n个盘子时: ...

  4. python123期末四题编程题 -无空隙回声输出-文件关键行数-字典翻转输出-《沉默的羔羊》之最多单词

    1. 无空隙回声输出 描述 获得用户输入,去掉其中全部空格,将其他字符按收入顺序打印输出. ‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬ ...

  5. JDK源码分析-ArrayList

    ArrayList 储存结构 private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA = {}; transient Objec ...

  6. 1. 不吹不擂，第一篇就能提升你对Bean Validation数据校验的认知

    乔丹是我听过的篮球之神,科比是我亲眼见过的篮球之神.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免 ...

  7. App性能测试前需要了解的内存原理

    这两天在研究性能中内存方面的一块,网上也零散看了挺多文章,写得很细但是感觉不够整体,所以这篇算是总结一下吧,当个复习资料. 那么这里个人分为两个大部分,第一部分应用内的内存管理,主要是oom的理解,G ...

  8. django学习(二）

    1.反向解析 什么是方向解析呢? 通过一些方法得到一个结果,该结果可以直接访问对应url出发视图函数. 先给一个路由和视图函数起一个别名.但是我们要注意的是反向解析的别名是不可以冲突的!!!不然会出现 ...

  9. java控制流程(二)

    一.循环结构 有一天你的女朋友让你写一百遍我爱你,你是要一行一行的手写出来,还是利用编程的循环结构写出来? while 语法: 表达式返回的为boolean值 while(表达式){ 需要循环的语句 ...

  10. 对于分布式Job的思考

    引言 在清理Github的时候,发现以前写的一个简单的分布式任务分发系统ClawHub/task-distribution,使用了zk的选主与队列,调度器使用spring的ThreadPoolTask ...