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. promise 和 setTimeout 在任务队列的执行顺序

    setTimeout(() => { console.log() }); const a = new Promise((resolve,reject)=>{ console.log(); ...

  2. vue 指令和修饰符

    1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...

  3. java启动参数

    java命令启动应用所使用的参数,基本是用于JVM的,某种程度上也叫做JVM参数.总的来说,java启动参数共分为三大类,分别是: 标准参数(-):相对稳定的参数,每个版本的JVM都可用. 非标准X参 ...

  4. Ant默认配置文件不是build.xml该如何编写命令进行编译打包

    Ant的构件文件是基于XML编写的,默认名称为build.xml. ant命令默认寻找build.xml文件.若文件名为hello.xml时,读者还需要对命令做少许改变, 改为:ant –f hell ...

  5. Mysql 免安装教程 百度云网盘有文件和word说明

    一 把文件解压到一个目录下 这是解压后的目录 将my.ini文件考进去 双击打开my.ini 找到这两行更改成自己的解压路径保存 右键此电脑属性 找到高级系统设置配置环境变量 新建—>变量值是解 ...

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

    23.5.3  WebAPI框架应用 程序框架其实就是一个半成品项目,在应用框架时,核心的服务程序只应用,不需要改动.当然如果有必要,也可以根据项目的需要对框架进行二次开发.本节内容主要基于我们的框架 ...

  7. jemalloc内存占用问题

    最近,有部分越南的服务器内存不断上涨,怀疑是内存泄漏,因为框架提供的内存报告里,C内存和Lua占用内存都不大,和ps里看的差好多.总内存在12G左右,C和Lua的加起来约4G,两者相差了8G 经过一番 ...

  8. ros相机标定

    没有经过校准的camera拍摄的图片是有畸变的.如下图: 而我们希望得到的图片是这样的 ros中提供了一个程序camera_calibration帮助我们去做校准. 具体怎么校准参考 https:// ...

  9. 聊聊 Vue 中 title 的动态修改

    由于之前的 Vue 项目打包成果物一直是嵌入集成平台中,所以一直没有关注过项目的 title.直到最近,突然有个需求,要求点击按钮在集成平台外新开一个页面,此时我才发现,原来我的项目的 title 一 ...

  10. Requests库主要方法解析以及Requests库入门需要掌握的框架

    Requests库主要方法解析以及Requests库入门 1.requests.request(method,url,**kwargs) **kwargs:控制访问的参数,均为可选项 params:字 ...