Vue必须掌握的十个指令

最新推荐文章于 2025-07-06 13:35:01 发布

webjxb

最新推荐文章于 2025-07-06 13:35:01 发布

阅读量161

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_43659504/article/details/90485981

Vue 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了Vue必须掌握的十个指令相关要点。v-bind书写可省略，v-on:click能简写为@click，v-text不能解析html标签而v-html可以。还提到根据显示/隐藏切换频率，分别适用v-show和v-if。

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

Vue必须掌握的十个指令

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        <div id="app">
            <!-- v-text跟双大括号的效果一样 -->
            <p v-text='text'></p>
            <!-- v-html可以解析html标签 -->
            <p v-html='html'></p>
            <!-- v-show用来控制元素的显示/隐藏 -->
            <p v-show='true'>{{ show }}</p>
            <p v-show='false'>{{ show }}</p>
            <!-- v-if也可以用来控制元素的显示/隐藏 -->
            <p v-if='false'>{{ vif }}</p>
            <!-- v-if 和 v-else 只有一个会被渲染出来。 -->
            <p v-else>{{ vif }}</p>
            <!-- v-for用来遍历渲染 -->
            <div v-for="(item,index) in list">{{index}}.{{ item }}</div>
            <!-- v-bind用来绑定属性，可简写省略v-bind -->
            <a v-bind:href="link">百度搜索</a>
            <!-- v-on用来绑定事件，可以简写为@ -->
            <button v-on:click="say('world')">v-on绑定事件</button> <br>
            <!-- v-model一般用在表单输入，实现数据双向绑定 -->
            <input v-model="val1" type="text" placeholder="v-model">
            <p>你输入的内容是：{{ val1 }}</p>
            <!-- v-once代表只渲染一次，后面数据变化也不会重新渲染 -->
            <input v-once="val2" type="text" placeholder="v-once">
            <p>你输入的内容是：{{ val2 }}</p>
        </div>
    
        <script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
        <script>
            let vm = new Vue({
                el: '#app',
                data: {
                    text: 'v-text跟双大括号的效果一样',
                    html: '<b>v-html可以解析html标签</b>',
                    show: 'v-show用来控制元素的显示/隐藏',
                    vif: '如果需要频繁切换显示/隐藏的，就用 v-show；如果运行后不太可能切换显示/隐藏的，就用 v-if 。',
                    list: ['张三','李四','王五'],
                    link: 'http://www.baidu.com',
                    val1: '',
                    val2: '只渲染一次'
                },
                methods: {
                    say(name) {
                        alert('hello,'+name);
                    }
                }
            });
        </script>
    
    </body>
    </html>