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. 【转】 java常量池

    理论 jvm虚拟内存分布:      程序计数器是jvm执行程序的流水线,存放一些跳转指令.      本地方法栈是jvm调用操作系统方法所使用的栈.      虚拟机栈是jvm执行java代码所使用 ...

  2. javascript中的闭包、函数的toString方法

    闭包: 闭包可以理解为定义在一个函数内部的函数, 函数A内部定义了函数B, 函数B有访问函数A内部变量的权力: 闭包是函数和子函数之间的桥梁: 举个例子: let func = function() ...

  3. Norm比较

    目录 Introduction BN LN IN GN SN Conclusion Introduction 输入图像shape记为[N, C, H, W] Batch Norm是在batch上,对N ...

  4. 内核态发生非法地址访问是否会panic

    https://mp.weixin.qq.com/s?__biz=MzAwMDUwNDgxOA==&mid=2652663676&idx=1&sn=b18ab57322594e ...

  5. 黄聪：Mysql开启InnoDB引擎出现1067错误的解决办法

    在my.ini文件添加下面这行: innodb_force_recovery = 1 可以解决:InnoDB: Attempted to open a previously opened tables ...

  6. TCP协议 - 面向连接

    一.TCP特性概览 1.面向连接 TCP是基于连接进行数据交互,通信双方在进行数据交互之前需要建立连接,该连接也只能用在双方之间进行交互.这点不像UDP中的组播和广播,可以在同一组中多个主机交互数据. ...

  7. dictionary vs Hashtables

    DictionaryDictionary is generic type Dictionary<TKey,TValue>Dictionary class is a strong type ...

  8. Z从壹开始前后端分离【 .NET Core2.0/3.0 +Vue2.0 】框架之四 || Swagger的使用 3.2

    本文梯子 本文3.0版本文章 前言 一.swagger的一般用法 0.设置swagger页面为首页——开发环境 1.设置默认直接首页访问 —— 生产环境 2.为接口添加注释 3.对 Model 也添加 ...

  9. Java日期时间API系列3-----Jdk7及以前的日期时间类的不方便使用问题

    使用Java日期时间类,每个人都很熟悉每个项目中必不可少的工具类就是dateutil,包含各种日期计算,格式化等处理,而且常常会遇到找不到可用的处理方法,需要自己新增方法,处理过程很复杂. 1.Dat ...

  10. 【面试突击】-RabbitMQ常见面试题（三）

    1.什么是RabbitMQ?为什么使用RabbitMQ? 答:RabbitMQ是一款开源的,Erlang编写的,基于AMQP协议的,消息中间件: 可以用它来:解耦.异步.削峰. 2.RabbitMQ有 ...