学习记录——vue指令_vue to app模块-优快云博客

本文链接：https://blog.youkuaiyun.com/sakura_zr/article/details/111935490

博客主要介绍了Vue指令，指出在模板中访问data和methods内容需通过指令，指令可是js表达式。详细阐述了v-html、v-text、v-bind、v-on、v-for、v-if、v-else、v-show、v-model等常见指令的功能及使用示例，如v-html识别html标签，v-if根据表达式渲染元素等。

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

vue指令

在模板中可以直接访问data和methods中的内容，必须通过指令的方式，指令可以是js的表达式。

常见指令：

v-html 绑定data中的值到innerHTML中识别html标签
v-text 与{{ }}含义相同不识别标签
v-bind 把标签的属性(attribute)跟data中的数据进行绑定,可以简写用冒号:
v-on 绑定事件监听器，简写用@，v-on:click=”方法的名字”简写成@click=”方法的名字”
v-for 循环
v-if 根据表达式的值有条件的渲染元素
v-else 必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-show 根据表达式的值，切换元素的display属性的值
v-model 一般作用于input，绑定input里面的value 双向绑定

v-html 和 v-text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <span v-html="message"></span>
        <span v-text="message"></span>  简写： <span>{{message}}</span>
    </div>
</body>

</html>
<script>
    //挂载到了window上
    //创建了vue的实例
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: `<h2>hello</h2>`, //内容
        }

    })
</script>

在这里插入图片描述
v-html识别超文本标签，v-text不识别标签。

v-bind

给div绑定class属性并写样式
在这里插入图片描述

或者绑定自定义属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-bind:class="active" v-html="message"></p>
        <p v-bind:title="title">hhh</p>    简写：<p :title='title'>hhh</p>
        <!-- 简写:title='title'和 v-bind:title='title' 效果一样 -->
    </div>
</body>

</html>
<script>
    //挂载到了window上
    //创建了vue的实例
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: 'hello', //内容
            active: 'active',
            title: '我是title',
        }
    })
</script>

v-if v-else和v-show

比如有一个按钮，点击显示或者隐藏元素：

<button>{{show}}</button>
<div v-bind:class="block"></div>

在这里插入图片描述
给div写个样式：

    <style>
        .block {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

然后给button添加点击事件，如果当前元素显示，点击按钮则隐藏，反之。
在这里插入图片描述
在data里添加一个isShow属性，给它的值为true，用来做if判断，给div添加v-if=”isShow”

如果isShow为true，button按钮文字为隐藏，div显示。
如果isShow为flase，button按钮文字为显示，div隐藏

v-if：是直接删除dom节点，数据没有加载的时候用v-if判断
比如以上例子，如果点击button隐藏了div，这个div标签就直接没有了
点击button隐藏div：在这里插入图片描述
点击button显示div：

v-show：相当于做了display：none的操作
在这里插入图片描述

v-if和v-else必须写在一起：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active {
            background-color: skyblue;
        }
        
        .block {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .other {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-bind:class="active" v-html="message"></p>
        <p :title='title'>hhh</p>
        <!-- 简写:title='title'和 v-bind:title='title' 效果一样 -->
        
        <button @click="showMsg">{{show}}</button>
        <div v-bind:class="block" v-if="isShow"></div>
        <div v-else class="other"></div>
    </div>
</body>

</html>
<script>
    //挂载到了window上
    //创建了vue的实例
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: 'hello', //内容
            active: 'active',
            title: '我是title',
            block: 'block',
            show: '隐藏',
            isShow: true,
        },
        methods: {
            showMsg() {
                this.isShow = !this.isShow
                if (this.isShow) {
                    this.show = '隐藏'
                } else {
                    this.show = '显示'
                }
            }
        }
    })
</script>

v-model

<!-- v-model：一般作用于 input 绑定input里面的value -->
   <input type="text" v-model="msg"> {{msg}}

在这里插入图片描述

v-for

<ul>
     <!-- <li v-for="(item,index) in 数据"></li> -->
     <!-- 数据有三种格式：对象、数组、字符串 -->
     <li v-for="(item,index) in list">
         {{item}}————{{index}} 
     </li>
</ul>

data: {
	list: ['巴达兽', '暴龙兽', '比丘兽', '天使兽', '兽人加鲁鲁']
},

在这里插入图片描述
点击button按钮删除li：要给button添加点击事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active {
            background-color: skyblue;
        }
        
        .block {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .other {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-bind:class="active" v-html="message"></p>
        <p :title='title'>hhh</p>
        <!-- 简写:title='title'和 v-bind:title='title' 效果一样 -->
        <button @click="showMsg">{{show}}</button>
        <div v-bind:class="block" v-if="isShow"></div>
        <div v-else class="other"></div>


        <!-- v-model：一般作用于 input 绑定input里面的value -->
        <input type="text" v-model="msg"> {{msg}}


        <ul>
            <!-- <li v-for="(item,index) in 数据"></li> -->
            <!-- 数据有三种格式：对象、数组、字符串 -->
            <li v-for="(item,index) in list">
                {{item}}————{{index}}
                <button @click="deleteItem(index)">删除</button>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    //挂载到了window上
    //创建了vue的实例
    let vue = new Vue({
        el: '#app', //绑定的标签
        data: {
            message: 'hello', //内容
            active: 'active',
            title: '我是title',
            block: 'block',
            show: '隐藏',
            isShow: true,
            msg: '',
            list: ['巴达兽', '暴龙兽', '比丘兽', '天使兽', '兽人加鲁鲁']
        },
        methods: {
            showMsg() {
                this.isShow = !this.isShow
                if (this.isShow) {
                    this.show = '隐藏'
                } else {
                    this.show = '显示'
                }
            },
            deleteItem(index) {
                //console.log(index);当前点击的元素的下标
                this.list.splice(index, 1);
            }
        }
    })
</script>