属性渲染

　　 关于标签的属性渲染统一使用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. 2020.5.25 第五篇 Scrum冲刺博客

    Team:银河超级无敌舰队 Project:招新通 项目冲刺集合贴:链接 目录 一.每日站立会议 1.1 会议照片 1.2 项目完成情况 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3. ...

  2. 个人项目WC.exe Node.js+electron实现

    前言 实现语言:Javascript 编译工具:webstorm GitHub:https://github.com/NPjuan/WC.git 项目要求 wc.exe 是一个常见的工具,它能统计文本 ...

  3. 怎样使用laravel的脚手架安装bootstrap

    第一步.使用composer引入laravel中的ui库 composer require laravel/ui --dev 第二步.生成bootstrap的基本脚手架 php artisan ui ...

  4. 牛客网PAT练习场-A+B和C

    签到题 .题目地址:https://www.nowcoder.com/pat/6/problem/4077 #include<iostream> #include<cstdio> ...

  5. 玩转Spring——Spring IOC/DI

    什么是IOCioc :Inversion of Control,即控制反转. 它不是一种技术,而是一种设计思想,即java程序中获取对象的方式发生反转,由最初的new方式创建,转变成由第三方框架创建. ...

  6. （数据科学学习手札94）QGIS+Conda+jupyter玩转Python GIS

    本文完整代码及数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 QGIS随着近些年的发展,得益于其开源免费 ...

  7. 从零开始的SpringBoot项目 ( 三 ) 项目打包( war包篇 )

    pom.xml 修改打包类型 jar 改为 war 添加 tomcat 依赖 找到最右边的 Maven Projects,点击进去,选择需要打包的项目,并点击 install,就开始打包了,打包前先点 ...

  8. 扫描仪文字识别ORC软件加强版（文通慧视完整版）下载

    http://www.wocaoseo.com/thread-300-1-1.html 扫描文字识别软件想必做seo的都知道是做什么用的,但是目前免费的OR大多不太好用或者说不够功能强大,因为这些软件 ...

  9. 3个必备cookie实用方法

    今天跟大家介绍一下三种cookie的使用方法,selenium提供了我们add_cookie()方法来跳过验证码直接登录的方法.我们现在以博客园登录为例,都知道现在博客园登录要拼图验证. 先在网页打开 ...

  10. Laravel5的验证码功能

    第三方扩展包 mews/captcha 作为基础来实现 Laravel 中的验证码功能 安装 注册 配置验证码文件 前端引用 后端验证 安装前准备(我这边没执行这个,安装成功,但是搜到的文件有写,不清 ...