AIDE技术官网
AIDEZY.COM

使用Vue.js简单切换某DIV的字体颜色与背景

使用Vue.js简单切换某DIV的字体颜色与背景

使用Vue.js简单切换某DIV的字体颜色与背景

前言:

使用Vue.js简单切换某DIV的颜色与背景,如果对你有帮助就看看吧。

实例代码:

请先导入Vue.js在使用,当然效果不仅仅用于此场景,还可以用于其它场景,看自己需求是什么就行了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title>AIDE技术网:aidezy.com</title>
</head>
<body>

<style type="text/css">
.shuxing{
background:red;
color: black;
}


</style>

<div id="el">

请选择:<input type="checkbox" v-model="user">

<br>
<br>

<div v-bind:class="{'shuxing' : user}">

点击上面的按钮让我变色吧!!!

</div>

</div>

<script type="text/javascript">

new Vue({

el:'#el',

data:{
user:false,
}

});

</script>


</body>
</html>

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册