第7节class与style绑定
方法一 效果图：
方法二 效果图：
方法三 效果图：
代码：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href=" "/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<p>1.方法一</p>
<div id="one">
<p v-bind:id="attribute_name">猜猜我是谁</p>
</div>
<script type="text/javascript">
var el_vbind = new Vue({
el: '#one',
data:{
attribute_name: 'id_red'
}
})
</script>
<style type="text/css">
#id_red{
color: red;
}
</style>
<br/>
<p>2.方法二</p>
<div id="two">
<p v-bind:class="{active: isActive,clsssNameTwo: isTwo}">哈哈哈哈哈</p>
<!-- 渲染为以下： 就是等同于以下 当isActive: true,isTwo: true 时 -->
<!-- <p class="active classNameTwo">哈哈哈哈哈</p> -->
</div>
<script type="text/javascript">
var el_vbind2 = new Vue({
el:'#two',
data:{
isActive: true,
isTwo: true
}
})
</script>
<style type="text/css">
.active{
color: blue;
}
</style>
<br/>
<p>3.方法三</p>
<div id="three">
<p v-bind:style="three_style">哎哟哦哦哦</p>
</div>
<script type="text/javascript">
var el_vbind3 = new Vue({
el:'#three',
data:{
three_style:{
color: 'green',
fontSize: '20px'
}
}
})
</script>
</body>
</html>
第7节class与style绑定的更多相关文章
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Vue中class与style绑定
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- Knockout.Js官网学习（style绑定、attr绑定）
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- Style绑定
目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind=" ...
- Class 与 Style 绑定
将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 <div cla ...
- 前端MVC Vue2学习总结（三）——模板语法、过滤器、计算属性、观察者、Class 与 Style 绑定
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...
- 【Vue.js】vue基础： 3种Class和Style绑定语法
凡是用到了v-bind,那就一定有变量的存在,下面是三种语法的展示: 1. 对象语法: v-bind:class="{active: isActive, 'text-danger': has ...
随机推荐
- Python--day25--面向对象之多态
多态(Python天生支持多态) 多态指的是一类事物有多种形态 动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): #同一类事物 ...
- win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序
本文是一个非常简单的博客,让大家知道如何使用 asp dot net core 做后台,使用 UWP 或 WPF 等做前台. 本文因为没有什么业务,也不想做管理系统,所以看到起来是很简单. Visua ...
- java 集合之Arraylist的遍历及排序
最近培训是先学习java基础 从最基本的开始学起 因为今天刚刚开博客 要把上周的一些重点内容归纳一下 1.Arraylist常用遍历以及排序 import java.util.ArrayList; i ...
- SpringBoot2.0 使用AOP统一处理Web请求日志（完整版）
一,加入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- MAMP "403 Forbidden You don't have permission to access / on this server."
2015年01月22日 17:27:31 阅读数:3488 用MAMP搭建本地服务器的时候,设置好ip和端口等属性之后,浏览器访问,报 403错误: Forbidden You don't have ...
- Tomcat最佳线程数
什么是最佳线程数? 为满足更多用户访问需求,可以调整Tomcat线程数,但是不能太大,否则导致线程切换开销,随着用户递增(线程数也随之调整),系统QPS逐渐增加,当用户量达到某个值,QPS并不会增加, ...
- UVA 247"Calling Circles"（floyd求传递闭包+SCC）
传送门 题意: 如果两个人相互打电话(直接或间接),则说他们在同一个电话圈里. (a,b) 表示 a 打给 b: 例如,(a,b),(b,c),(c,d),(d,a),则这四个人在同一个电话圈里: 输 ...
- C# 使用反射获取私有属性的方法
本文告诉大家多个不同的方法使用反射获得私有属性,最后通过测试性能发现所有的方法的性能都差不多 在开始之前先添加一个测试的类 public class Foo { private string F { ...
- SpringMVC 非注解配置
web.xml配置: <servlet> <servlet-name>springmvc</servlet-name> <servlet-class>o ...
- Js中没有方法的重载
<script type="text/javascript"> //方法名相同,后面的方法覆盖了前面的方法.后面的方法需要一个name,但没给传值,所以是undefin ...