Vue常用基础指令大全（详解）

冷寂的雨

已于 2022-06-15 17:29:35 修改

阅读量369

点赞数 1

分类专栏： vue.js 前端文章标签： vue.js javascript 前端 html

于 2022-06-15 15:56:11 首次发布

本文链接：https://blog.csdn.net/m0_61470934/article/details/125290062

版权

vue.js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

v-pre 令vue语法失效

<div id="app">
        <div>
            <!-- v-pre 用于标签内，作用：使vue渲染失效-->
            <h3 v-pre>{{title}}</h3>
        </div>

    </div>
    <script>
        var app = new Vue({
            el:'#app', 
            data : {
                title:"请添加产品",
                man:{
                    name:'坤坤',
                    age:'21'

                }
            } ,
        });
    </script>

页面效果如下：

2.v-once 元素只渲染一次

<div id="app">
        
       <ul>
            <li v-for="(item,index) in users" v-once>
                {{index}}--{{key}}--{{value}}
            </li>
        </ul> 

    </div>

    

    <script>
        var app = new Vue({ 
            el:'#app', 
            data : {
                users:[
                    {name:'zs',age:18,sex:'男'},
                    {name:'ls',age:20,sex:'男'},
                    {name:'ww',age:19,sex:'男'}
                    ],
            } ,
        });
        
    </script>

页面效果如下：

3.v-text 设置元素的文本

<div id="app">
        {{ woman.name }}是一个{{woman.age>=18?'成年人':'未成年人'}}</br>
        <span v-text="woman.name"></span>是一个{{woman.age>=18?'成年人':'未成年人'}}
</div>
<script>
        var app=new Vue({
                el:'#app',
                data:{
                    woman:{
                        name:'坤坤',
                        age:'50'
                    },
                }
        })
    </script>

页面效果如下：

4.v-html 设置元素的innerHTML：

<div id="app">
        
        <h2 v-html="man10"></h2>
    </div>
    <script>
        var app=new Vue({
                el:'#app',
                data:{
                    
                    },
                    man10:'<span style="color:green">未年人</span>',
                }
        })
    </script>

页面效果如下：

5.v-if 根据条件渲染数据（v-if相比于v-show源代码不可见，重要代码用v-if）:

<div id="app">
         
        <div v-for="(item, index) in woman" :key="index" v-if="item.age<18">
            {{item.name}}是<span v-html="man10"></span>
        </div>
    </div>
    <script>
        var app=new Vue({
                el:'#app',
                data:{
                    woman:[
                    {
                        name:'坤坤',
                        age:'17'
                    },
                    {
                        name:'坤坤2',
                        age:'20'
                    },
                    ],
                    man10:'<span style="color:green">未年人</span>',
                }
        })
    </script>

页面效果如下：

6.v-else 双分支：

<div id="app">
        <div v-if="woman.age<18">
            <span v-html="man10"></span>
        </div>
        <div v-else>
            <span v-html="man50"></span>
        </div>
</div>
<script>
        var app=new Vue({
                el:'#app',
                data:{
                    woman:{
                        name:'坤坤',
                        age:'50'
                    },
                    man50:'<span style="color:green">老年人</span>',
                    man10:'<span style="color:green">未年人</span>',
                }
        })
    </script>

页面效果如下：

7.v-else-if 多分支：

<div id="app">
        <div v-if="woman.age<18">
            <span v-html="man10"></span>
        </div>
        <div v-else-if="woman.age>=18&&woman.age<40">
            <span v-html="man18"></span>
        </div>
        <div v-else>
            <span v-html="man50"></span>
        </div>
</div>
<script>
        var app=new Vue({
                el:'#app',
                data:{
                    woman:{
                        name:'坤坤',
                        age:'50'
                    },
                    man50:'<span style="color:green">老年人</span>',
                    man18:'<span style="color:green">中年人</span>',
                    man10:'<span style="color:green">未年人</span>',
                }
        })
    </script>

页面效果如下：

8.v-show 设置元素的display属性值（v-show相当于css中的style="display:none;"隐藏数据，但是源代码可见，不能放重要代码）：

<div id="app">
        <h2>上联：世上再无小坤坤，无人唱跳加rap</h2>
        <h2 v-show="ok">下联：世上再无马保国，无人闪电五连鞭</h2>
        <!--v-show相当于css中的style="display:none;"隐藏数据，但是源代码可见，不能放重要代码-->
        <h2 v-if="ok">作者：杰哥</h2><!--v-if源代码不可见，重要代码用v-if-->
        <button id="ha" data-name="xianshi" v-on:click="showBtn">点我显示下联</button>
        <button @click="showBtn2">点我隐藏</button>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                    ok:false
            },
            methods: {
                showBtn(){
                   this.ok=!this.ok;
                    //event.target.innerText="被点击了。" 改变目标标签文本
                    //event.target.hidden=true  隐藏目标功能
                    //event.target.disabled=true  功能变成不可用
                },
                showBtn2(){
                   this.ok=false;
                    //event.target.innerText="被点击了。" 改变目标标签文本
                    //event.target.hidden=true  隐藏目标功能
                    //event.target.disabled=true  功能变成不可用
                }
            },
        });
    </script>

页面效果如下：

v-show设置的初始值为false所以隐藏内容

点击按钮可显示隐藏内容，将v-show设置的值取反

点击按钮让v-show设置的值为false

9.v-on:click 鼠标左键点击事件(简写：@click)：

<div id="app">
    <h2>{{text}}</h2><br>
    <button @click="btn">点我</button>
</div>
<script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                text:'',
            },
            methods: {
                btn(){
                  this.text='坤坤';
                },
            },
        });
    </script>

页面效果如下：

10.console.log() 打印日志:

<div id="app">
        <h2>上联：世上再无小坤坤，无人唱跳加rap</h2>
        <h2 v-show="ok">下联：世上再无马保国，无人闪电五连鞭</h2>
        <h2 v-if="ok">作者：杰哥</h2>
        <button id="ha" data-name="xianshi" v-on:click="showBtn(5,$event)">点我显示下联</button><!--showBtn(5,$event)中 $event传递该数据的所有信息-->
        <button @click="showBtn2">点我隐藏</button>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                    ok:false,
            },
            methods: {
                showBtn(num,event){
                    console.log(event)//打印日志 输出该数据的所有信息
                   this.ok=!this.ok;
                    //event.target.innerText="被点击了。" 改变目标标签文本
                    //event.target.hidden=true  隐藏目标功能
                    //event.target.disabled=true  功能变成不可用
                },
                showBtn2(){
                    this.ok=false;
                }
            },
        });
    </script>

页面效果如下：

//event.target.innerText="被点击了。" 改变目标标签文本
//event.target.hidden=true 隐藏目标
//event.target.disabled=true 功能变成不可用

11.v-bind:设置html原生的值：

<div id="app">
    <!-- v-bind简写就是在属性前加 :  ，如 :value,:disabled,:checked-->
    <input type="text" :value="name">
</div>
<script>
    var app=new Vue({
        el:'#app',
        data:{
            name:'坤坤',
        }
    });
</script>

页面如下：

12.v-for-arry:遍历数组(v-for="(item,index) in 数组名")：

<div id="app">
        <ul>
            <li v-for="(item, index) in users">
                {{index}}--{{item.name}}--{{item.age}}
            </li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                users:[
                    {
                        name:'zs',
                        age:18,
                    },
                    {
                        name:'ls',
                        age:20,
                    },
                    {
                        name:'ww',
                        age:22,
                    },
                ],
            }
        });
    </script>

页面如下：

13.v-for-obj:遍历对象：

<div id="app">
        <ul>
            <li v-for="(value, key) in users" :key="key">
                {{key}}--{{value}}
            </li>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                users:[
                    {
                        name:'zs',
                        age:18,
                    },
                    {
                        name:'ls',
                        age:20,
                    },
                    {
                        name:'ww',
                        age:22,
                    },
                ],
            }
        });
    </script>

页面如下：

14.v-model(语法糖，在表单控件或者组件上创建双向绑定):

<div id="app">
        <input type="checkbox" value="a" v-model="checkedNames">
        <label for="one">A</label>
        <input type="checkbox" value="b" v-model="checkedNames">
        <label for="two">B</label>
        <input type="checkbox" value="c" v-model="checkedNames">
        <label for="three">C</label>
        <br>
        <span>选中的按钮: {{ checkedNames }}</span>
      </div>
      <script>
        new Vue({
          el: '#app',
          data: {
            checkedNames: []
          }
        })
      </script>

页面效果如下：