Vue的常用指令-优快云博客

本文链接：https://blog.youkuaiyun.com/vue888/article/details/126929486

Vue的常用指令

在代码的编译中Vue指令算是我们经常用到的，现在我自己总结了一下，希望可以给各位带来一点点帮助。

v-bind

	动态绑定属性的  简写成 :

	 <h1 v-bind:style="'color: '+(num<3?'black':(num<5?'red':'pink'))">{{num}}</h1>

v-on

	绑定事件，简写成 @

	<button type="button" v-on:click="num++">+1</button>
	<button type="button" @click="num++">+1</button>

v-cloak

	v-cloak指令常常用在插值表达式的标签中，因为它可以解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码的情况。
	v-cloak的使用

首先，在差值语法所在的标签处加上v-cloak指令

	<h3 v-cloak>{{name}}</h3>

	然后，在css中设置v-cloak的属性为display为none

		<style type="text/css">
        [v-cloak]{
            display: none;
        }

</style>

v-cloak的原理

v-cloak原理是先通过样式隐藏内容，然后在内存中进行值的替换，将替换的内容再反馈给界面，数据渲染完场之后，v-cloak 属性会被自动去除。

v-show

都是控制元素的显示和隐藏的，v-if通过动态的 删除或者添加元素 来实现元素的显示和隐藏
		v-show是通过 css的display：none来隐藏元素

		<h1 v-show="num<3">haha</h1>
		<h1 v-show="num<5 && num>=3">heihei</h1>
		<h1 v-show="num>=5">hehe</h1

v-if

	通过动态的 删除或者添加元素 来实现元素的显示和隐藏

	 	<h1 v-if="num<3">haha</h1> 
		<!-- 小于5  -->
		<h1 v-else-if="num<5">heihei</h1> 
		<!-- 否则  -->
	 	<h1 v-else>hehe</h1>

v-html和v-text

	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:'<button>一个按钮</button>'
        }
    })
</script>

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-model

	数据双向绑定指令，限制在 <input>、<select>、<textarea>、components中使用
	
	语法： v-model="<变量名>"

<body>
    <div id="app">
        <div>val的值:{{val}}</div>
        <div>val的值:{{val}}</div>
        <input v-model="val">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            val:'success'
        }
    })
</script>

v-for

	v-for可用来遍历数组、对象、字符串。

<div id="app">
    <!-- obj -->
    <div v-for="(att,val) in obj">
        {{att}}:{{val}}
    </div>
    <!-- arr -->
    <div v-for="(val, index) in arr">
        {{index}}:{{val}}
    </div>
    <!-- string -->
    <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-pre

跳过插值解析

		<p v-pre>我是一本书，我的名字叫{{三国演义}}</p>
		<p v-once>{{num}}</p>
		<p>{{num}}</p>
		<input v-model="num"/>
		<button type="button" @click="num++">加1</button>

		export default {
  				name: 'Home',
 				data:function(){
	 		return {
		  		num:0,
				name: '三国演义'
	 		 	}
  			}
		}
</script>