属性渲染

　　关于标签的属性渲染统一使用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 属性渲染的更多相关文章

vue服务器端渲染指南研究
什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...
Vue视图渲染原理解析，从构建VNode到生成真实节点树
前言在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
vue.js 渲染完成回调
vue.js渲染完成后,想触发一些事情,写在哪里呢? 答案是mounted 例子: new Vue({ el:'#demo', data:{ text:'Hello' }, mounted:funct ...
Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素注意else只能跟在v-if或者v-s ...
vue 数组渲染问题
vue 数组渲染问题问题一: 用v-for循环渲染数组数据时,数据更新了,视图却没有更新由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 当你利用索引直接设置一个项时, ...
vue 避免渲染时闪烁
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
二、Vue 页面渲染过程
前言上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...
vue 动态渲染数据很慢或不渲染
vue 动态渲染数据很慢或不渲染原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...
vue render 渲染函数
vue render 渲染函数经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...

随机推荐

给你项目加个Mock吧
mockjs官网:http://mockjs.com/ 一.简介 1.什么是mock 拦截请求,生成随机数据. 2.mock的使用场景当后端接口还未完成的时候,前端需要一些数据来写页面,此时就需要M ...
Spring Security使用数据库数据完成认证--练气后期2
写在前面没错,这篇文章还是练气后期!但作者我相信筑基指日可待! 在前一篇文章当中,我们简单地分析了一下Spring Security的认证流程,知道了如果想要实现对自己用户数据(账户.角色.权限)的 ...
从零开始的SpringBoot项目 ( 三 ) 项目打包( jar包篇 )
一.准备工作 1.工具:Idea , maven 2.首先得保证 pom 有 maven 插件二.开始打包找到最右边的Maven Projects,点击进去,选择需要打包的项目,并点击 insta ...
百度官方给出的seo优化策略
http://www.wocaoseo.com/thread-157-1-1.html 因为要参加seo工程师考试了,这两天一直在学习seo的基础理论,昨天也写了备战seo工程师考试的文章,说实在话, ...
面试：为了进阿里，死磕了ThreadLocal内存泄露原因
前言在分析ThreadLocal导致的内存泄露前,需要普及了解一下内存泄露.强引用与弱引用以及GC回收机制,这样才能更好的分析为什么ThreadLocal会导致内存泄露呢?更重要的是知道该如何避免这 ...
win环境下安装配置openCV-4.3.0
win环境下安装openCV-4.3.0 首先下载推荐国内镜像官网太太太慢了附上下载地址下载之后打开exe解压到目录都是常规操作环境变量的配置依次打开到系统变量的path 新建一个路径为 ...
MySQL锁这块石头似乎没有我想的那么重
前言前言为本人写这篇文章的牢骚,建议跳过不看. 之前好几次都想好好的学习MySQL中的锁,但是找了几篇文章,看了一些锁的类型有那么多种,一时间也没看懂是什么意思,于是跟自己说先放松下自己,便从书 ...
无法登陆网站，nginx漏配置
location / { try_files $uri $uri/ /index.php?$query_string; } 这条主要是将index.php入口文件重写掉,所以平常我 ...
长沙做假证u
长沙做假证[电/薇:187ヘ1184ヘ0909同号]办各类证件-办毕业证-办离婚证,办学位证书,办硕士毕业证,办理文凭学历,办资格证,办房产证不. 这是一个简单的取最大值程序,可以用于处理 i32 数 ...
Roads in the North （树的直径）
Building and maintaining roads among communities in the far North is an expensive business. With thi ...

Vue 属性渲染