属性渲染

　　 关于标签的属性渲染统一使用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. go二叉树、struct、接口

    二叉树实现.及遍历 二叉树定义 type Student struct { Name string left* Student right* Student } 如果每个节点有两个指针分别用来指向左子 ...

  2. 访问github太慢？我写了一个开源小工具一键变快

    前言 GitHub应该是广大开发者最常去的站点,这里面有大量的优秀项目,是广大开发者寻找资源,交友学习的好地方.尤其是前段时间GitHub公布了一项代码存档计划--Arctic Code Vault, ...

  3. in文件注意事项及详细解释（转载）

    转载自:https://www.cnblogs.com/sysu/p/10817315.html  和   https://www.cnblogs.com/panscience/p/4953940.h ...

  4. py_冒泡排序

    import random """ 排序:将一组无序记录序列调整为有序记录序列 列表排序:将无序列表调整为有序列表 输入:列表 输出:有序列表 升序与降序 内置函数sor ...

  5. 原生 JavaScript30 练习 Day 1 (原生JS控制键盘模拟击鼓)

     代码如下   <!DOCTYPE html> <html lang="en"> <head>     <meta charset=&qu ...

  6. 《神经网络的梯度推导与代码验证》之CNN前向和反向传播过程的代码验证

    在<神经网络的梯度推导与代码验证>之CNN的前向传播和反向梯度推导 中,我们学习了CNN的前向传播和反向梯度求导,但知识仍停留在纸面.本篇章将基于深度学习框架tensorflow验证我们所 ...

  7. Jogl2.0 jogamp-all-platforms 在eclipse 中的配置

    我的电脑在win8 64位系统,搞了好久,网上的方法都快试了个遍,官网的试了,都不行,目前成功了,希望可以帮助其他同学. 1.首先去这里http://jogamp.org/deployment/jog ...

  8. Vue-router的用法与使用步骤

    Vue-router的使用步骤: Vue Router的使用步骤还是比较清晰的,按照步骤一步一步就能完成路由操作 A.导入js文件 B.添加路由链接 C.添加路由占位符(最后路由展示的组件就会在占位符 ...

  9. IDEA 2020 集成 Activity插件

    我按照教程打开settings-plugins,搜索actiBPM搜索不到, 于是我就去下载插件,然后再安装,具体步骤如下: 下载插件: 到http://plugins.jetbrains.com/, ...

  10. 非旋Treap——fhq treap

    https://www.luogu.org/problemnew/show/P3369 知识点:1.拆分split,合并merge 2.split,merge要点:通过传址调用来简便代码 3.记得ro ...