文章目录

• vue的内部指令
• v-if v-else-if v-else v-show 条件指令
• v-for循环指令
• v-text & v-html
• v-on：绑定事件监听器
• v-model指令
• v-bind 指令

vue的内部指令

v-if v-else-if v-else v-show 条件指令

1、v-if

v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
代码如下：

<div id="app">
<h1 v-if='isShow'>{{msg}}</h1>
<button @click='isShow=(isShow?false:true)'>按钮</button>
</div>
<script>
new Vue({
el:'#app',
data: {
msg:'abc',
isShow:true
},
})
</script>

效果如下：

2.v-else-if v-else

<div id="app">
<div v-if="name=='mm'">
mm
</div>
<div v-else-if="name=='hh'">
hh
</div>
<div v-else>
其他人
</div>
</div>
<script>
new Vue({
el:'#app',
data: {
name:'cc'
}
})
</script>

3.v-show
调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div id="app">
<h1 v-show='isShow'>{{msg}}</h1>
<button @click='isShow=(isShow?false:true)'>按钮</button>
</div>
<script>
new Vue({
el:'#app',
data: {
msg:'abc',
isShow:true
},
})
</script>

v-if和v-show的区别：

• v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
• v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for循环指令

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

<div id="app">
<div v-for="(item,index) in arr">
{{index+"年龄"+item.age+";"+"名字"+item.name}}
<div v-for="(items,indexs) in item.favor">
{{indexs+items}}
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'cc',
arr: [{
age: 18,
name: "menphis",
favor: ["哈哈", "卖萌"]
}, {
age: 50,
name: "jack",
favor: ["智障", "猫咪"]
}, {
age: 99,
name: "minnie",
favor: ["夜猫", "傻二哈"]
}]

}
})
</script>

v-text & v-html

1.v-text
我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

<template>
<div class="hello">
<span>{{msg}}</span>  =
<span v-text="msg"></span>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

运行结果：

Welcome to Your Vue.js App = Welcome to Your Vue.js App

2.v-html
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了：

<span v-html="msgHtml"></span>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msgHtml: '<p>v-html哈</p>'
}
}
}
</script>

运行结果

v-html哈

使用v-html 指令，需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致 XSS 攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
v-on 还有一种简单的写法，就是用@代替----------语糖法。
实例如下：

<template>
<div class="hello">
<button @click="add">加</button>
<button @click="recd">减</button>
<h1>{{count}}</h1>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
count:1
}
},
methods:{
add:function(){
this.count++;
},
recd:function(){
this.count--;
}
}
}
</script>

运行结果：

v-model指令

v-model指令，绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。
简单的实例：

<template>
<div class="hello">
<h1>{{message}}</h1>
<input type="text" v-model="message">
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
message:'123'
}
}
}

运算结果


修饰符：

• lazy：取代 input 监听 change 事件。
• number：输入字符串转为数字。
• trim：输入去掉首尾空格。

v-bind 指令

v-bind是处理HTML中的标签属性的，例如就是一个标签，也是一个标签，我们绑定上的src进行动态赋值。

<div id="app">
<div class="com" :class="{'active':isActive}"></div>
</div>
<script>
new Vue({
el:'#app',
data: {
isActive:true
}
})
</script>
<style>
.com{
height:300px;
width:300px;
background-color:aqua;
}
.active{
background-color: pink;
}

</style>

运行结果