VUE 基础(二) - 技术栈

1 v-show:根据表达值的真假，切换元素的显示和隐藏

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <!-- 三种表达方式 -->
    <!-- 直接固定表达式的真假 -->
        <img type="button" value="v-show" v-show="true">
    <!-- 将表达式的值放在data中   -->
        <img src="xxx" v-show="isShow"> 
    <!-- 也可以通过判断来确定真假 -->
        <img src="xxx" v-show="age>=18">
        <input type="button" value="切换状态" @click="change">   
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:"true",
                age: 16
            },
            methods: {
              change:function(){
                this.isShow=!this.isShow
              }
            },
        })
    </script>
</body>
</html>

2 v-if:根据表达值的真假，切换元素的显示和隐藏(用法大致同v-show 不过多展示)

3 v-bind:设置元素的属性(比如src,title,class)

格式: v_bind:属性名=表达式

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <!-- 两种表达方法 -->
      <img src="xxx" >
      <img v-bind:src="imgSrc" >
      <!-- 存在一种简化写法 -->
       <img :src="imgSrc"> //更常用
       <br>
       <img :src="imgSrc" :title="imgTitle+'!'"> //可以字符串拼接
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              imgSrc:"xxx",
              imgTitle:"你好呀"
            },
            methods: {
             
            },
        })
    </script>
</body>
</html>

4 v-for:根据数据生成列表结构

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
   <div id="app">
    <input type="button"  value="添加数据" @click="add">
    <input type="button"  value="减少数据" @click="remove">
        <ul>
            <li v-for="item in arr">{{item}}</li>
            <li v-for="item in vegetables">{{item.name}} </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              arr:[1,2,3,4,5],
              vegetables:[
                {name:"西兰花炒蛋"},
                {name:"西红柿炒蛋"}
              ]
            },
            methods: {
                add:function(){
                    this.vegetables.push({name:"胡萝卜炒蛋"});
                },
                remove:function(){
                    this.vegetables.shift();
                }
            },
        })
    </script>
</body>
</html>

5 v-model:获取和设置表单元素的值(双向数据绑定) 通常用于文本内容

绑定后无论是改变v-model中的值还是data中的整体的数值都会发生相同的变化

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
   <div id="app">
       <input type="text" v-model="message">
       <!-- h2标签中的值也同步跟着变化 -->
       <h2>{{message}} </h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              message:"你好"
            },
            methods: {
            
            },
        })
    </script>
</body>
</html>