<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>vue--样式绑定 事件处理</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

</head>
<style>

.active {
width: 100px;
height: 100px;
background: green;
border:1px solid black;
}
.text-danger {
background: red;
}
.base {
width: 100px;
height: 100px;
}
</style>
<body>
<div id="app">
<!--事件绑定-->
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<!--样式绑定-->
<div v-bind:class="{active:isActive,'text-danger': hasError}"></div>
<div v-bind:class="classsObject"></div>
<!--使用对象-->
<div v-bind:class="classObject"></div>
<!--数组语法-->
<div v-bind:class="[activeClass, errorClass]"></div>
<!--三元表达式来切换列表中的 class ：-->
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
<!-- v-bind:style 直接设置样式：-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
<!--使用对象-->
<div v-bind:style="styleObject">菜鸟教程</div>
<!--数组语法-->
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<div id="greet">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
</div>
</body>
<script>
var app = new Vue({
el: '#greet',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
say: function (message) {
alert(message)
},
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
console.log(event)
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
<script>

new Vue({
el:'#app',
data:{
counter:0,
activeColor:'green',
fontSize:30,
isActive:true,
hasError:true,
activeClass: 'active',
errorClass: 'text-danger',
name: 'Vue.js',
error: {
value: true,
type: 'fatal'
},
classsObject:{
active:true,
'text-danger':true
},
styleObject:{
color:'red',
fontSize:'30px'
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
</script>
</html>

vue-----样式绑定 事件处理的更多相关文章

  1. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  3. Vue样式绑定和事件处理器

    一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...

  4. Vue样式绑定、事件绑定

    1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...

  5. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  6. vue样式绑定

    vue 绑定class 和style 有相同的地方,可以是数组和对象,对于class class是真实的在css样式中添加的,只不过在元素中添加需要:class这样代表绑定,然后这个class作为对象 ...

  7. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  8. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  9. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  10. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

随机推荐

  1. Git设置旧邮箱与现邮箱不一致问题

    设置名字和邮箱git config user.name 'lhr' git config user.email 'lhr@qq.com' 工程根目录创建email.sh文件粘贴以下代码 #!/bin/ ...

  2. ansj分词

    本文转载至:https://blog.csdn.net/bitcarmanlee/article/details/53607776 最近的项目需要使用到分词技术.本着不重复造轮子的原则,使用了ansj ...

  3. (一)java异常处理的几个问题

    1.java中两种异常? 答:java中存在两种异常:受检查(checked)异常和不受检查(unchecked)异常.不受检查的异常不需要在方法或者构造函数上声明,就算是方法或是构造函数会发生这样的 ...

  4. Tensorflow实战系列之四：

    这个是第四篇,打算写一些语义分割的内容实战.

  5. 团队作业4——beta冲刺

    beta冲刺准备 冲刺准备 5天冲刺博客 Beta冲刺一 Beta冲刺二 Beta冲刺三 Beta冲刺四 Beta冲刺五 用户使用报告 用户使用用报告 冲刺总结 冲刺总结随笔 项目码云地址 码云地址

  6. input(Text)控件作为填空输入,但运行后,有曾经输入的记录显示,用autocomplete="off"解决

    系统中,有设计填空题,原来程序中,用input(Text)控件,   <input type="text" name="NO<%=rs("id&qu ...

  7. Java EE设计模式（主要简单介绍工厂模式，适配器模式和模板方法模式）

    Java EE设计模式分为三种类型,共23种: 创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式. 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式 ...

  8. Java语法基础学习DayTwenty（反射机制续）

    一.Java动态代理 1.代理设计模式的原理 使用一个代理将对象包装起来, 然后用该代理对象取代原始对象. 任何对原始对象的调用都要通过代理. 代理对象决定是否以及何时将方法调用转到原始对象上. 2. ...

  9. Liunx find/locate/whereis/which 总结

    一.locate 命令 是一个文件查找命令,命令所属软件包 mlocate 不同于 find 命令的是,find命令在整块磁盘中搜索:而 locate命令 在数据路库文件中搜索,当天创建的文件第二天才 ...

  10. RobotFramework之Run Keyword的使用

    RobotFramework之Run Keyword的使用        在之前写的RobotFramework(二)中有提到过这个Run Keyword关键字的使用,但是再做检查判断的时候,发现它的 ...