Vue 框架学习--1、常见的基本指令以及语法_v-if,v-for,v-show,v-danger 那个不属于所学框架中的基本指令-优快云博客

本文详细介绍了Vue.js中五个核心指令的功能与用法，包括v-bind用于动态绑定属性，v-for实现列表渲染，v-if控制元素的条件性显示，v-model实现表单输入的双向数据绑定，以及v-on绑定事件监听器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言，此文为vue初学者提供技术总结，所有代码都需要vue.js支持，或者通过cdn方法引入

一、Vue框架中的基本指令

1、v-bind

v-bind是动态绑定数据的指令，例如

<a v-bind:href="url">...</a>

那么，我就可以通过vue修改url的值从而达到切换不同href的目的。

<script>

new vue({

    el:（你的div的id），

    data:function（）{

return{

    url:'www.csdn.com'

}

}

})

</script>

2、v-for

v-for循环的与大致为 x in y，例如

  <div id="box">
      <ul>
          <!--ng-repeat-->
          <li v-for="item in arr">   //这里的item是形参可以进行修改
              <span>{{item.name}}</span>
              <span>{{item.age}}</span>
          </li>
      </ul>
  </div>
 <script type="text/javascript">
     new Vue({
         el:'#box',
         data(){
             return{
 //                arr:['module','views','controlle','aaaaa']
                 arr:[
                     {"name":"xiaohong1","age":12},
                     {"name":"xiaohong2","age":12},
                     {"name":"xiaohong3","age":12},
                     {"name":"xiaohong4","age":12}
                 ]
             }
         }
     })
 </script>

3、v-if

v-if与v-show的不同之处就是v-if是通过vue中的参数觉得是否插入该元素，二v-show则为是否展示该元素

<p v-if="seen">现在你看到我了</p>

<p v-show="seen">现在你看到我了</p>

在seen为false时，源代码中不存在

<p v-if="seen">现在你看到我了</p>

4、v-model

v-model是极为重要的指令，他与v-bind有些相似，但他是双向的，例如

<template>
<div class="PI">
<form id="personal_info">
    <ul>
        <li><span>姓名：</span><input v-model:value="perName"></li>
        <li><span>邮件：</span><input v-model:value="perEmail"></li>
        <li><span>电话：</span><input v-model:value="perPhone"></li>
        <li><span>即时通讯工具：</span><input v-model:value="perComun"></li>
        <li><span>网站：</span><input v-model:value="perWeb"></li>
    </ul>
    <ul>
        <li><span>职位：</span><input v-model:value="perJob"></li>
        <li><span>部门：</span><input v-model:value="perDepatment"></li>
        <li><span>位置：</span><input v-model:value="perPosition"></li>
    </ul>
    <button v-on:click="postPI" class="PIbutton"><p>修改个人信息</p></button>
</form>
</div>
</template>
  
<script> 
export default{
    name:'PI',
    data:function(){
        return{
            perName:'aaa',
            perEmail:"aaaaa@qq.com",
            perPhone:'131aaaaaaaa7',
            perComun:'5aaaaaaaaa8',
            perWeb:'null',
            perJob:'student',
            perDepatment:'信息学院',
            perPosition:'aaaa',

        }
    },
    methods:{
        postPI:function(){
            if(this.perName==''){
                return alert("姓名不得为空");
            }
            if(this.perEmail==''){
                return alert("邮箱不得为空");
            }
            if(this.perPhone==''){
                return alert("电话不得为空");
            }
            if(this.perComun==''){
                return alert("即时通讯工具不得为空");
            }
            if(this.perWeb==''){
                return alert("网站不得为空");
            }
            if(this.perJob==''){
                return alert("职位不得为空");
            }
            if(this.perDepatment==''){
                return alert("部门不得为空");
            }
            if(this.perPosition==''){
                return alert("位置不得为空");
            }
            var data = new FormData(document.getElementById('personal_info'));
            
        }
    }
}
</script>

我在网页中改变input中的值，vue中的值也会改变，从而可以实现实时判断input中的值来达到某些效果

5、v-on

v-on为事件定义的指令，在上面的例子中定义了v-on:click="postPI'，那我就可以在vue中定义postPI的具体方法。

当然也可以是v-on:mouseover等等。