vue 常用指令,以及动态添加样式,单选效果,多选效果样式实现

Vue基础——常用指令

指令:

Vue的指令是以v-开头的,作用于页面中的元素,所以需要将指令绑定与元素中,从而达到给绑定的元素添加行为的目的。

​ 语法:<元素标签 v-指令 = “表达式”>

1.v-text和v-html

​ v-text 和v-html作用相近,都是更新元素的中的内容,可以理解为innertext和innerHTML,而不能一味的滥用这两个指令 ,如果需要更新的只是部分的元素则应该使用的是双大括号的插值:{ {value}}。
v-html 会解析标签,而v-text怎不会
另外 v-html 的特性会出现安全性问题,所以在官方文档中也明确指出“只在可信内容上使用 v-html,永不用在用户提交的内容上。”

2. v-show

​ 根据表达式的值来确定元素的display值,从而达到元素的显示和隐藏。

3. v-if

v-if 的作用与v-show大体一致,都是根据表达式的布尔值来添加或者删除元素。
补充:v-show 是通过改变display值来改变元素的显示和隐藏。它是依旧在html中的。而v-if则直接将元素移出了页面中,所以不会再标签中看到所选的元素。

4. v-else-if 和v-else

这两个指令的含义不必过多的解释,值得注意的是这两个指令不能够单一的使用,这意味着这两个指令前必须有v-else-if或者v-else 指令。所以通常v-if ,v-else-if,v-else 会搭配使用。

5. v-for

v-for 用来迭代渲染,达到循环的操作的目的,可以迭代数组,数组对象,对象或是数字。

6. v-on

v-on 是用来绑定事件的监听器,表达式可以是一个方法也可以是内联语句。有许多修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

也可以进行缩写

<button v-on:click="methods">button>

可以缩写成

<button @click="methods">button>

7. v-model

它可以实现在表单控件或者组件上创建双向绑定。

这就实现了data中value和input中数据的绑定,使得数据在动态的变化在span中体现出来。

8. v-bind

用来绑定属性, 属性后面的等号指向数据,它可以简写为 :class, :href

<a v-bind:href='data'>a>

也可以进行缩写

<a :href='data'>a>

动态添加样式

【对象】

html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"

html :style="{color:(index==0?conFontColor:’#000’

你可能感兴趣的:(vue,vue,html,css)