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. LG2679 「NOIP2015」子串 线性DP

    问题描述 LG2679 题解 设\(opt[i][j]\)代表A串前\(i\)个,匹配\(B\)串前\(j\)个,选择了\(k\)个子串的方案数. 转移用前缀和优化一下. \(\mathrm{Code ...

  2. Linux设备树文件结构与解析深度分析

    Copy from :https://blog.csdn.net/woyimibayi/article/details/77574736 正文开始 1. Device Tree简介 设备树就是描述单板 ...

  3. Centos 6 变更 窗口管理器

    /etc/sysconfig/desktop ( 没有的话创建一个) DESKTOP="KDE" DISPLAYMANAGER="KDE"

  4. The trap of Bash trap

    Can you spot the problem with the following Bash script? resource_created="false" function ...

  5. 【STM32H7教程】第15章 STM32H7的GPIO基础知识（重要）

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第15章       STM32H7的GPIO基础知识(重要) ...

  6. 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 2

    23.1.3  接口的应用和优势 API是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无须访问源码,或理解内部工作机制的细节.接口应用的一些常见场景如下 ...

  7. 愉快地使用Groovy Shell

    这是一篇有关Groovy Shell的帖子,以及它如何在日常工作中为您提供帮助(只要您是软件开发人员).无论您使用哪种编程语言或技术,都可以从Groovy Shell中受益.唯一真正的要求是您能够编写 ...

  8. 近日LeetCode算法（记录）

    近日LeetCode算法 前言:最近刷了好多leetcode算法题,大家知道,程序=数据结构+算法,由此可见,算法真的是很重要的呢.闲话少谈,切入正题,来看看小编觉得有点意思的5题算法题吧... 1. ...

  9. c# winform 窗体失去焦点关闭（钩子实现）

    先来一个辅助类 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Inte ...

  10. VS2019安装好后，经常打不开软件没反应解决方法

    原文地址:https://blog.csdn.net/FL1623863129/article/details/89013137 VS2019于昨日正式发布,博主立马下载一个专业版尝尝鲜,但是发现项目 ...