方法一 效果图：

 方法二 效果图：

 方法三 效果图：

代码：

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title></title>

    <link type="text/css" rel="stylesheet" href=" "/>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

    </style>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<p>1.方法一</p>

<div id="one">

    <p v-bind:id="attribute_name">猜猜我是谁</p>

</div>

<script type="text/javascript">

    var el_vbind = new Vue({

        el: '#one',

        data:{

            attribute_name: 'id_red'

        }

    })

</script>

<style type="text/css">

    #id_red{

        color: red;

    }

</style>

<br/>

<p>2.方法二</p>

<div id="two">

    <p v-bind:class="{active: isActive,clsssNameTwo: isTwo}">哈哈哈哈哈</p>

    <!-- 渲染为以下：  就是等同于以下 当isActive: true,isTwo: true 时 -->

    <!-- <p class="active classNameTwo">哈哈哈哈哈</p>  -->

</div>

<script type="text/javascript">

    var el_vbind2 = new Vue({

        el:'#two',

        data:{

            isActive: true,

            isTwo: true

        }

    })

</script>

<style type="text/css">

    .active{

        color: blue;

    }

</style>

<br/>

<p>3.方法三</p>

<div id="three">

    <p v-bind:style="three_style">哎哟哦哦哦</p>

</div>

<script type="text/javascript">

    var el_vbind3 = new Vue({

        el:'#three',

        data:{

            three_style:{

                color: 'green',

                fontSize: '20px'

            }

        }

    })

</script>

</body>

</html>

第7节class与style绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  3. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  4. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  5. Knockout.Js官网学习（style绑定、attr绑定）

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  6. Style绑定

    目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...

  7. Class 与 Style 绑定

    将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...

  8. 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. 【Vue.js】vue基础： 3种Class和Style绑定语法

    凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...

随机推荐

  1. Python--day30--互联网协议与osi模型

  2. 析构函数 p157

    析构函数 确保对象的各部分被正确的清除,及做一些用户指定的其他清理工作. 当对象超出它的作用域时,编译器将自动调用析构函数:手动用new在堆上分配的对象空间,需要调用'delete 对象地址'进行手动 ...

  3. dotnet 设计规范 · 数组定义

    本文告诉大家数组定义需要知道的规范,本文翻译 docs dotnet ✓ 建议在公开的 API 使用集合而不是数组.集合可以提供更多的信息. X 不建议设置数组类型的字段为只读.虽然用户不能修改字段, ...

  4. [转]Java Web工程目录结构

    说明 介绍java web 工程的基本结构目录.记录java web 工程结构的学习. Java web 结构 java web严格来说分为两类工程结构:一个是工程编译目录结构,一个是工程发布目录结构 ...

  5. [转]在ASP.NET WebAPI 中使用缓存【Redis】

    初步看了下CacheCow与OutputCache,感觉还是CacheOutput比较符合自己的要求,使用也很简单 PM>Install-Package Strathweb.CacheOutpu ...

  6. python类中的双下划线方法

    __getitem__,__setitem__和__delitem__ 实现了对象属性的字典化操作. class Person: def __init__(self, name, age, hobby ...

  7. html设置<input type="text">内的内容自动为大写

    添加css样式:text-transform:uppercase;可以实现自动转换为大写样式. 但是input 的value还是小写的,因为它是CSS样式. <input type=" ...

  8. H3C RIP协议概述

  9. tensorflow在文本处理中的使用——Doc2Vec情感分析

    代码来源于:tensorflow机器学习实战指南(曾益强 译,2017年9月)——第七章:自然语言处理 代码地址:https://github.com/nfmcclure/tensorflow-coo ...

  10. 2018-8-10-win10-uwp-商业游戏-1.2.1

    title author date CreateTime categories win10 uwp 商业游戏 1.2.1 lindexi 2018-08-10 19:16:50 +0800 2018- ...