vue动态操作div的class

看代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js操作元素属性</title>

    <script src="vue.js"></script>

</head>

<style>

    .red{

        color:red;

    }

    .green{

        color: green;

    }

</style>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <h1 v-bind:class="class_1">{{title}}</h1>

    <h1 v-bind:class="'green'">{{title}}</h1>

    <!--在vue中v-bind这个因为多次使用所以可以使用简短语句-->

    <h1 :class="class_1">{{title}}</h1>

    <h1 :class="'green'">{{title}}</h1>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            class_1:'red'

        }

    });

</script>

</body>

</html>

vue.js操作元素属性的更多相关文章

  1. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  2. 003——VUE操作元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 3 、操作元素 (属性 CSS 和 文档处理)

    3   操作元素-属性 CSS 和 文档处理  3.1 属性操作 $("p").text()    $("p").html()   $(":check ...

  4. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  5. JS获取元素属性和自定义属性

    获取元素的属性分为两种类型: 1-获取元素常见的属性(class,id,type,value……) 2-获取自定义的元素的属性(data-value,data-mess…….) 获取元素的属性,设置元 ...

  6. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  7. 关于vue.js的计算属性练习代码

    参照官网联系如下: <!DOCTYPE html><html lang="en"><head> <meta charset="U ...

  8. vue.js事件，属性，以及交互

    这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...

  9. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

随机推荐

  1. 【未完成】【oracle】单引号使用问题

    ‘-’不可以用 原因:

  2. 【洛谷4585】[FJOI2015] 火星商店问题（线段树分治）

    点此看题面 大致题意: 有\(n\)家店,每个商品有一个标价.每天,都可能有某家商店进货,也可能有某人去购物.一个人在购物时,会于编号在区间\([L_i,R_i]\)的商店里挑选一件进货\(d_i\) ...

  3. celery定时器

    Celery 1.什么是Clelery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 Celery架构 Celery的架构由三部分组 ...

  4. TensorFlow2.0教程-使用keras训练模型

    1.一般的模型构造.训练.测试流程 # 模型构造 inputs = keras.Input(shape=(784,), name='mnist_input') h1 = layers.Dense(64 ...

  5. python解释器和环境安装

    现在最新的是python3.7下载好安装包:python-3.7.0-amd64.exe下载地址:https://www.python.org/getit/ 选择3.7.0下载 选择一款适合自己的编译 ...

  6. Mybatis关联查询之一

    MyBatis的关联查询之一对多,多对一 在关系型数据库中,我们经常要处理一对多,多对一和多对多的关系. 一对多,多对一 一.entity 实体类 public class SmbmsRole { p ...

  7. JBoss+eclipes之HelloWorld

    网上罕有教程,文档看不太懂.鄙人摸索成功以记之. 创建新的EJB项目:[File]--[New]--[Other]-- [EJB]--[EJB project] 此处可见我的JBoss服务器使用的是W ...

  8. [08]ASP.NET Core 中 launchsettings.json 启动配置文件

    ASP.NET Core launchsettings.json 启动配置文件 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自 ...

  9. MySQL中的group_concat函数的使用

    本文通过实例介绍了MySQL中的group_concat函数的使用方法,比如select group_concat(name) . MySQL中group_concat函数 完整的语法如下: grou ...

  10. 利用代码生成工具生成基于ABP框架的代码

    在前面随笔,我介绍了整个ABP优化过框架的分层模型,包括尽量简化整个ABP框架的各个层的关系,以及纳入一些基类的辅助处理,使得我们对应业务分层类或者接口尽可能减少代码,并具有生产环境所需要的基类接口, ...