vue常用指令
- 常用指令：
vue常用指令有：v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等。
-
v-once
只会执行一次渲染，当数据发生改变时，不会再变化
<div id="app"> <p v-once>{{msg}}p> <input v-model="msg" type="text" /> div> <script> let vue = new Vue({ el:"#app", data:{ msg:'今天气温' } }) script>
-
v-show
v-show接受一个表达式，用于给元素添加一个
display<div id="app"> <div v-show="conditional == 'ok' ">{{msg}}div> <input v-model="msg" type="text" /> div> <script> let vue = new Vue({ el:"#app", data:{ msg:'今天气温', conditional:'ok' } }) script> -
v-if、v-else、v-else-if
v-if和v-show有同样的效果，不同在于
v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。说明一下：
v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用v-if、v-else-if都是接受一个条件，v-else不需要参数。比较简单，看看案例：<div id="app"> <div> 小明评级为：<span v-if="score >= 90">优秀span> <span v-else-if="score >= 80">良好span> <span v-else-if="score >= 60">及格span> <span v-else>不及格span> div> div> <script> new Vue({ el:"#app", data:{ msg:'message', score:59, }, }) script>
-
v-for
v-for可用来遍历数组、对象、字符串。
<div id="app"> <div v-for="(att,val) in obj"> {{att}}:{{val}} div> <div v-for="(val, index) in arr"> {{index}}:{{val}} div> <div v-for="astr in str"> {{astr}} div> div> <script> new Vue({ el:"#app", data:{ obj:{ name:'kk', age:'18', hobby:'pingpong' }, arr:[ 1,2,3,4,4,5,6,7 ], str:'str hello world' }, }) script>
-
v-text和v-html
v-text是渲染字符串，会覆盖原先的字符串v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子<div id="app"> <div>{{innerHtml}}div> <div v-text="innerHtml">div> <div v-html="innerHtml">div> div> <script> new Vue({ el:"#app", data:{ innerHtml:'' } }) script>效果：
-
v-bind
是用于给标签内的属性赋值，在标签的属性中直接加双括号会被当作字符串，如下
如果给属性赋值，那么可以使用v-bind<div id="app"> <div v-bind:class="className">"{{innerHtml}}"div> <div :class="className">"{{innerHtml}}"div> <div v-text="innerHtml">div> <div v-html="innerHtml">div> div> <script> new Vue({ el:"#app", data:{ innerHtml:'', className:'box' } }) script>效果：
-
v-on
v-on用于事件绑定语法:
v-on:<事件类型>="<函数名>"<body> <div id="app"> <div v-on:click="clickfunc">点击事件div> <div @click="clickfunc">点击事件div> div> body> <script> new Vue({ el:"#app", data:{ }, methods:{ // 定义一个 点击函数 clickfunc:function(){ console.dir('click event') } }, }) script>
效果如下 :
-
v-model
数据双休绑定指令，限制在
、