vue 的css及style的三种绑定方式

html-css07

vue 的css及style的三种绑定方式,第1张

1.数组方法,元素为css的名称,可以在里面使用三目运算

<div :class="[ isOne?'one':'', 'two']">数组方法 </div>

2.对象方法,元素键名为css名称,用true和false 来控制是否显示

<div :class="{'one':isOne,'two':true}">对象方法</div>

3.直接加入,加入的内容是css名称,可以通过计算来控制显示的css,名称

<div :class="isOne?'one':'two'" >直接加入</div>

1.数组方法,元素是一个个对象,对象则是style的键值对,当然可以用三目运算控制

<div :style="[{color: 'green',fontSize: '30px'} , isOne ?{'font-weight': 'bold'}:{}]" >数组方法</div>

2.对象方法,元素键名为style名称,值为style属性值。当然可以用三目运算控制来控制是否显示对应的style属性值

<div :style="{ color: isOne ?'green':'#f00' , backgroundColor:'#f00'}" >对象方法</div>

3.直接加入,只要保证得出来的字符串是正确的即可,怎么用都可以

<div :style="(isOne ? 'color:green' : '')+ 'backgroundColor:#f00' ">直接加入</div>

css不能设置a标签的href。

CSS只是设置样式,如颜色大小等等。

要设置a标签的href值,可以用js,或者直接在标签里写上地址。

css中a标签的超链接绑定数据库的方法也有的。

1.html 中的a 无法直接和数据库交互,因为html是客户端语言。

2.如果需要交互,那么 href中可以是一个服务端请求,比如/query/userlist.action 这样可以请求服务端查询用户列表。

3.原则上html是没有服务端交互的,需要交互必须用服务端语言如php,jsp等。

vue3点击之后加css样式在Vue3中可以再css标签中使用v-bind(***)来绑定一个属性控制它的样式,注意:【如果你的数据不是使用Vue3的 ref 或者 reactive使其变成响应...