欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue.js基础学习之class与样式绑定

程序员文章站 2024-01-30 10:34:40
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: &l...

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

<html>
<head>
 <meta charset="utf-8">
 <title>vue test</title>
 <style type="text/css">
 body {font-family: verdana;}
 p { font-family: times, "times new roman", serif;}
 .static.active {color: green; font-size: 35px;}
 div.text-danger {color: red;font-size: 25px;}
 div.active {color: blue;font-family: verdana;}
 </style>

 <script src="./vue.min.js"></script>
</head>
<body>

<div id="app">
 <!-- create an instance of the todo-item component -->
 <todo-item></todo-item>
</div>

<div class="static"
 v-bind:class="{ active: isactive, 'text-danger': haserror }">
 <p>class property set.</p>
</div>

<div id="app3" 
 v-bind:class="[activeclass,errorclass]">
 <p>group class property set.</p>
</div>

<div id="app4" v-bind:class="[isactive ? 'active' : 'text-danger']">
 <p>三元表达式加样式</p>
</div>

<div id="app5">
 <my-component v-bind:class="{ active: isactive }"></my-component> 
</div>

<div id="app6">
 <p v-bind:style="{ color: activecolor, fontsize: fontsize + 'px' }">绑定内联样式</p>
 <p v-bind:style="styleobject">对象样式绑定</p>
</div>

<script>

vue.component('todo-item', {
 template: '<p>todo test.</p>'
})

// 一定要实例化才能用
var app = new vue({
 el: '#app'
})

// 用类选择器构造一个vue对象并绑定额外的class属性
var app2 = new vue({
 el: '.static',
 data: {
 isactive: false,
 haserror: true
 }
})

// 数组语法加 class (因为是从下往上拿样式,所以text-danger的color样式被覆盖)
var app3 = new vue({
 el: '#app3',
 data: {
 activeclass: 'active',
 errorclass: 'text-danger'
 }
})

var app4 = new vue({
 el: '#app4',
 data: {
 isactive: true
 }
})

vue.component('my-component',{
 template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'
})
var app5 = new vue({
 el: '#app5',
 data: {
 isactive: true
 }
})

// 绑定内联样式
var app6 = new vue({
 el: '#app6',
 data: {
 activecolor: '#ff00ff',
 fontsize: 30,
 styleobject: {
  color: '#585858',
  fontsize: '25px'
 }
 }
})



</script>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。