vue.js内部指令

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>

运行结果