时间:2021-05-26
一、用 变量形式 绑定单个 Class 名
在 vue 中绑定单个 class 名还好说,直接写就可以了
<template> <div id="app"> <!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : --> <!-- 3.将 box 绑定给 div --> <div :class="box"></div> </div></template><script>export default { name: 'app', data () { return { // 2.在 data 中把 yellow 赋给 box box: 'yellow' } }}</script><style>.yellow{ width: 200px; height: 200px; background: #ff0;}</style>用 Vue 绑定单个Class 名
二、用 数组形式 绑定多个 Class 名
比如我们想再给这个 div 加个阴影
在 style 中写好样式
.shadow{ box-shadow: 10px 10px 5px 0 #999;}在 data 中继续添加数据对象
<script>export default { name: 'app', data () { return { box: 'yellow', shadow:'shadow' } }}</script>在标签中以数组的形式绑定 Class 名
<template> <div id="app"> <div :class="[box,shadow]"></div> </div></template>就 OK 了。
用 数组形式 绑定多个 Class 名
三、用 json 形式 绑定多个 Class 名
该方法方便用于当同时添加多个 Class 名时,在某种情况下判断显示哪种样式
先写好样式
<style>.yellow{ width: 200px; height: 200px; background: #ff0;}.shadow{ box-shadow: 10px 10px 5px 0 #999;}</style>在 data 中添加数字对象,用来做判断
<script>export default { name: 'app', data () { return { show1:true, show2:false } }}</script>以 json 的形式绑定到 class 中,通过布尔值改变 show1 与 show2 的值,来控制 div 的状态
<template> <div id="app"> <div :class="{yellow:show1,shadow:show2}"></div> </div></template>用 json 形式 绑定多个 Class
ps:vue解决跨域问题
改config/index.js文件
proxyTable: {// 请求到 '/device' 下 的请求都会被代理到 target: http://debug.xxx.com 中'/v1/*': {target: 'https://api.tiaotiao5.com',secure: true, // 接受 运行在 https 上的服务changeOrigin: true}}总结
以上所述是小编给大家介绍的使用 Vue 绑定单个或多个 Class 名的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue动态绑定class练习。:class=“{‘类名1':条件表达式,‘类名2':条件表达式…}”exportdefault{data(){return{li
关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考:html:Vuejs中Class与Style绑定猴猴呀lowrie猴猴呀lowr
简单使用的右键菜单,希望能帮助大家。下面是截图和实例代码实例预览$(document).ready(function(){//class为demo1的样式绑定此
vue的实例对象首先用js的new关键字实例化一个vueel:vue组件或对象装载在页面的位置,可通过id或class或标签名template:装载的内容。HT
正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性。先定义class:复制代码代码