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. WPF 精修篇 自定义控件

    原文:WPF 精修篇 自定义控件 自定义控件 因为没有办法对界面可视化编辑 所以用来很少 现在实现的是 自定义控件的 自定义属性 和自定义方法 用VS 创建自定义控件后 会自动创建 Themes 文件 ...

  2. python-openCV 绘制图形

    文档链接:https://docs.opencv.org/trunk/dc/da5/tutorial_py_drawing_functions.html 文档描述了OpenCV的几个绘图功能: 绘制圆 ...

  3. [题解向] Manacher简单习题

    \(1\) LG1659 [国家集训队]拉拉队排练 求前\(k\)大的奇数长度回文串的长度之积. \(\rm |S|\leq 1e6,K\leq 1e12\) --一开始觉得挺水,就开始二分最少长度能 ...

  4. spring cloud 2.x版本 Config配置中心教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前面的文章eureka-server的实现. 参考 eureka-server ...

  5. 21个Java Collections面试问答

    Java Collections框架是Java编程语言的核心API之一. 这是Java面试问题的重要主题之一.在这里,我列出了一些重要的Java集合面试问题和解答,以帮助您进行面试.这直接来自我14年 ...

  6. MySQL数据库查询所有表名

    查找指定库中所有表名 select table_name from information_schema.tables where table_schema='db_name'; 注:替换db_nam ...

  7. 模型可视化工具netron

    https://github.com/lutzroeder/Netron 支持各种格式的模型 caffe模型实测效果: 右侧可以看到卷积核的具体的值．

  8. 在IDEA中用Maven打包大项目时失败问题

    今天在完成公司里某项功能开发时,准备用Maven打包,后来在打包的过程中报错:OutOfMemoryError.如下图: 后来经过查找资料,发现可以配置一下Maven的参数即可解决此问题. 配置参数为 ...

  9. 帝国CMS QQ登陆接口插件 适用于所有帝国7.2版本

    插件名称:帝国CMS-QQ登录插件 插件作者:帝国CMS官方 插件介绍:帝国CMS系统的QQ登录插件. 官方网站:http://www.phome.net ---------------------- ...

  10. 6.JavaCC官方入门指南-例1

    例1:整数加法运算   在这个例子中,我们将判断如下输入的式子是否是一个合法的加法运算: 99 + 42 + 0 + 15   并且在输入上面式子的时候,数字与加号之间的任何位置,都是可以有空格或者换 ...