Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式

今天的小实例是关于 Vue 框架动态绑定 css 样式,这也是非常常用的一个部分

首先说一下 动态绑定,相对的大家都知道静态绑定,静态绑定的话,直接加 class=“”就可以了,使用 Vue 呢之前也介绍过一个 v-bing:class="{{redClass:true}}" ,也可以实现绑定,但都不是动态绑定,动态绑定肯定是根据用户的某个操作实现动态的修改样式

先看下面的第一个小实例:

源代码 html 文件:
请看注释

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn-cnblogs/xpwi</title>
        <!--引入自定义的样式-->
        <link rel="stylesheet" href="css/style.css" />
        <!--引入 vue 核心 js-->
        <script type="text/javascript" src="js/vue.js" ></script>

    </head>
    <body>

        <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
        <div id="vue-app">
            <h2>动态绑定 css 样式</h2>

            <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
            然后我们可以通过修改 布尔值来实现修改样式-->
            <h3 v-bind:class="{red:true}">实例1</h3>
            <h3>实例2</h3>

        </div>

        <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
        <script type="text/javascript" src="js/computed.js" ></script>
    </body>
</html>

源代码 css 文件:

.red{
    color: red;
}

.change{
    background-color: yellow;
}

第二个小实例:
实现,鼠标放上去,修改背景色

源代码 html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn-cnblogs/xpwi</title>
        <!--引入自定义的样式-->
        <link rel="stylesheet" href="css/style.css" />
        <!--引入 vue 核心 js-->
        <script type="text/javascript" src="js/vue.js" ></script>

    </head>
    <body>

        <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
        <div id="vue-app">
            <h2>动态绑定 css 样式</h2>

            <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
            然后我们可以通过修改 布尔值来实现修改样式-->
            <!--dataRed,dataChange是布尔值,定义在js 文件中-->
            <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>
            <h3>实例2</h3>

        </div>

        <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
        <script type="text/javascript" src="js/css.js" ></script>
    </body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
    //注意代码格式

    //el:element 需要获取的元素,一定是 html 中的根容器元素
    el:"#vue-app",
    data:{

        dataRed : true,
        dataChange : false
    },
    methods:{

    }

});

源代码 css 文件:

.red{
    color: red;
}
.change{
    background-color: yellow;
}

上面的动态,大家可以看到是通过修改样式的 打开和关闭

实例二:

源代码 html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn-cnblogs/xpwi</title>
        <!--引入自定义的样式-->
        <link rel="stylesheet" href="css/style.css" />
        <!--引入 vue 核心 js-->
        <script type="text/javascript" src="js/vue.js" ></script>

    </head>
    <body>

        <!--vue-app 是根容器,定义一个 id,然后在 js 里操作-->
        <div id="vue-app">
            <h2>动态绑定 css 样式</h2>

            <!--Vue 中绑定 class,使用的是 json 对象,类名:布尔值
            然后我们可以通过修改 布尔值来实现修改样式-->
            <!--dataRed,dataChange是布尔值,定义在js 文件中-->
            <h3 v-on:mouseover="dataChange=!dataChange" v-on:mouseout="dataChange=!dataChange" v-bind:class="{red:dataRed,change:dataChange}">实例1</h3>

            <h3 v-on:mouseover="changeHeight=!changeHeight" v-on:mouseout="changeHeight=!changeHeight" v-bind:class="{yellowBG:true,changeHeight:changeHeight}">实例2</h3>

        </div>

        <!--引入自己的 js,注意必须写在 body 标签里最后,因为必须先加载你的整个 HTML DOM,才回去执行 vue 实例-->
        <script type="text/javascript" src="js/css.js" ></script>
    </body>
</html>

源代码 js 文件:

//实例化 vue 对象
new Vue({
    //注意代码格式

    //el:element 需要获取的元素,一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
        dataRed : true,
        dataChange : false,
        changeHeight : false
    },
    methods:{

    }

});

源代码 css 文件:

.red{
    color: red;
}

.change{
    background-color: yellow;
}

.yellowBG{
    width: 20%;
    background-color: yellow;
}

.changeHeight{
    width: 20%;
    height:100px
}

原文地址:https://www.cnblogs.com/xpwi/p/9955643.html

时间: 2024-11-05 15:47:30

Vue 框架-05-动态绑定 css 样式的相关文章

Vue之动态绑定CSS样式

demo.html 1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml" 3 xmlns:v-on="http://www.w3.org/1999/xhtml"> 4 <head> 5 <met

vue项目引入自定义.css的样式文件

ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style> js文件的引入 在main.js中: import API from './assets/api/api.config.js' Vue.prototype.$API = API; P.S.:传

css样式小框架

1.如div{...}会给所有的<div></div>增加样式. 2.名前井号“#”:对应html中的标签的id属性,写法为#name.如#p1{...}会给<p id="p1">ID is p1</p>增加样式. 3.名前小数点“.”:对应html中标签的class属性,写法为.name.如.p2{...}会给<p class="p2">CLASS is p2</p>增加样式. 4.中间空格“

ntv.js框架(第三章) - 机顶盒CSS样式的编写

机顶盒支持基础的CSS样式属性,例如:margin, padding, float, position等,各厂商对于基础样式属性的渲染差异性也不大.但在CSS3和动画效果支持上各厂商偏差较大,由于机顶盒属弱终端类型(硬件资源弱),内置支持的动画功能有限,而且也不是运营商目前强制要求支持的功能. 同样就目前网内的应用设计要求上来讲,使用到CSS3及动画的应用非常少,大多停留在实验室演示阶段.

Vue框架的使用。

使用VUE首先需要下载安装一些列的环境. 第一步: 安装Node.js 下载并安装:node-v8.9.0-x64.msi 第二步: 安装Vue脚手架: cmd以管理员身份执行 npm install vue-cli -g 或者安装淘宝版 cnpm install vue-cli -g vue -V  查看是否安装成功 第三步: 创建项目: vue init webpack myProject  (项目名字) 提示内容: 然后初始化: vue init webpack myProject 第四步

在Vue框架中引入Element

文章会讲到如何在Vue框架中引入Element 那我们先来说一下Vue框架:Vue是渐进式,JavaScript框架.很多人不理解什么是渐进式,简单点讲就是易用.灵活.高效(没有太多限制) 这里介绍npm安装方式: 打开cmd,找到你Vue项目的路径 运行 npm i element-ui -S 然后在main.js里写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/

Vue 框架-08-基础实战 demo

Vue 框架-08-基础实战 demo 前面介绍了有 7 篇了,都是小实例,没有相对完整的应用,虽然有些功能挺实用,但还是有的不常用的,今天记录一篇关于前几篇基础内容的实战 demo,也是对 Vue 基础的简单应用. 来看截图: 源代码 html 文件: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi<

Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p