学习vue.js中class与style绑定
关于vue.js中class与style绑定的练习代码，分享给大家，供大家参考：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs中Class与Style 绑定</title>
<link rel="stylesheet" href="css/vuetext.css">
</head>
<body>
<!-- 数据绑定常见的需求是绑定class和内联样式
v-bind 可以绑定属性class -->
<!-- 这个表示如果isactive是true时 class就与active绑定 -->
<div id="app-1" v-bind:class="{ active: isActive }">
猴猴呀
</div>
<!-- 还可以绑定静态样式-->
<div id="app-2" class="static" v-bind:class="{ active: isActive }">
lowrie
</div>
<!-- 还可以直接绑定数据里的一个对象-->
<div id="app-3" v-bind:class="classObject">
猴猴呀
</div>
<div id="app-4" v-bind:class="[activeClass, errorClass]">
lowrie
</div>
<!-- 关于vue组件会专门再学习 -->
<!-- v-bind绑定内联样式与绑定class类似 数组 对象 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app = new Vue({
el: '#app-1',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!',
isActive: true,
}
});
var app3=new Vue({
el:'#app-3',
data: {
classObject: {
active: true,
}
}
});
var app4=new Vue({
el:'#app-4',
data:{
activeClass: 'active',
errorClass: 'text-danger'
}
});
css:
.active{
color: #FFA07A;
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 对象语法 我们可以传给 v-bind:clas
-
本文向大家介绍vue.js绑定class和style样式（6），包括了vue.js绑定class和style样式（6）的使用技巧和注意事项，需要的朋友参考一下 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和
-
本文向大家介绍Vue.js每天必学之Class与样式绑定，包括了Vue.js每天必学之Class与样式绑定的使用技巧和注意事项，需要的朋友参考一下 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style
-
本文向大家介绍详解vue.js之绑定class和style的示例代码，包括了详解vue.js之绑定class和style的示例代码的使用技巧和注意事项，需要的朋友参考一下 一.绑定Class属性。 绑定数据用v-bind:命令，简写成: 语法：<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作
-
本文向大家介绍vue绑定class与行间样式style详解，包括了vue绑定class与行间样式style详解的使用技巧和注意事项，需要的朋友参考一下 一、绑定class属性的方式 1、通过数组的方式，为元素绑定多个class 上例为span 绑定2个class,通过设定red_color和bg_color的值，找到对应的class类名 2、通过控制class的true或者false，来使用对应的
-
本文向大家介绍学习vue.js表单控件绑定操作，包括了学习vue.js表单控件绑定操作的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了vue.js表单控件绑定的具体代码，供大家参考，具体内容如下 html: js: 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。