vue框架中常用指令v-for等等

最新推荐文章于 2024-08-28 18:19:04 发布

洛洛大芳

最新推荐文章于 2024-08-28 18:19:04 发布

阅读量262

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/DYFNB/article/details/119546686

版权

vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。下面是我的代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <!-- v-for循环指令用于列表的循环渲染 -->
    <!-- 这里展示对数组和对象的循环渲染 -->
    <!-- item不是数组中具体的某一项 -->
    <div id="vuediv">
        <ul>
        <li v-for="item in music">{{item.name}}</li>
        </ul>
        <!-- 渲染对象 -->
        <!-- item表示某个对象 -->
        <ul>
            <li v-for="item in obj">{{item}}</li>
        </ul>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#vuediv",
        data() {
            return {
                music:[
                    {name:"青花瓷"},
                    {name:"一个在制服诱惑"},
                    {name:"在哪里"}
                ],
                obj:{
                    name:"洛洛大芳",
                    age:21,
                    sex:"男"
                }
            }
        },
    })
</script>
</html>

v-if&&v-show

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

<h1 v-show="ok">Hello!</h1>

我的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="vuediv">
        <!-- v-if表示根据表达式得值生成或者删除一个元素 -->
        <!-- v-show表示根据表达式的值隐藏或者显示一个元素 -->
        <div>
            <button>我是添加按钮</button>
        </div>
        <div>
            <button id="show" v-show="deleteButton">我是删除按钮</button>
            <button v-on:click="deleteButton=true">设置显示</button>
            <button v-on:click="deleteButton=false">设置隐藏</button>
        </div>
        <div>
            <button id="if" v-if="editButton">我是修改按钮</button>
            <button v-on:click="editButton=true">设置显示</button>
            <button v-on:click="editButton=false">设置隐藏</button>
        </div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#vuediv",
        data() {
            return {
                deleteButton:true,
                editButton:true
            }
        },
    })
</script>
</html>

v-on

v-on是用来绑定事件处理的,又鼠标事件和键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理方法</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="vuecontainer">
       <button v-on:click="greet">Greet</button>
    </div>
    
</body>
<script>
    var vm=new Vue({
        el:"#vuecontainer",
        data:{
            name:"vue.js"
        },
        methods: {
          greet:function(event){
            //   this是vue对象
              alert("哈哈哈哈哈哈"+this.name+"!")
              if(event){
                //   event是原生dom对象
                  alert(event.target.tagName)
              }
          }  
        }
    })
</script>
</html>

v-once

v-once是只会触发一次,就是说下一次触发事件不会改变第一次之后的结果,也就是说响应一次,再点一次也不会有作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="vuediv">
        <label>年龄</label>
        <input type="text" v-model="age"></input>
        <div v-once>第一次输入的值:{{age}}</div>
        <div>第二次输入的值:{{age}}</div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#vuediv",
        data() {
            return {
                age:10
            }
        },
    })
</script>
</html>

v-if-else

表示判断语句和javascript中的作用一致,就不多多赘述了,看文档即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <!-- 他们等价于if-else-if-else语句 -->
    <div id="vuediv">
        <div v-if="Math.random()>0.5">
            哈哈哈
        </div>
    <div v-else>
           卡卡卡
    </div>
    <div v-if="number===1">
        a
    </div>
    <div v-else-if="number===2">
       b
    </div>
    <div v-else="number===3">
       c
    </div>
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#vuediv",
        data() {
            return {
                number:1
            }
        },
    })
</script>
</html>