学习Vue系列—常用指令v-bind、v-on、v-for、v-if和v-show

Vue常用语法格式

插值语法

 <div id="app">
        <!-- {{ }}插值语法，也叫胡子语法，相当于营造了一个可以书写js代码的简单环境  -->
        <p>num1和num2较大的数字是:{{num1>num2?num1:num2}}</p>
        <p>请反转str: {{ str.split("").reverse().join("") }}</p>
    </div>
     <script>
        new Vue({
            el:"#app",
            data:{
            	num1:10,
            	num2:20,
                str:"hello world",
            }
        })
    </script>

v-bind指令

v-bind:指令用来控制标签属性，简写为:，值是data中的数据。如果data中的值插入到 标签属性中, 就用 v-bind:。

<div id="app">
        <a v-bind:href="csdn">开发者社区</a>
        <a :href="csdn">开发者社区</a>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                csdn:"https://www.baidu.com",
            }
        })
    </script>

v-on指令

v-on:指令用来绑定事件 ，简写为 @

 <div id="app">
        <p>{{num1}}</p>
        <!--  v-on: 用来绑定事件  简写为 @ -->
        <button v-on:click="num1++">按钮1</button>
        <button @click="num1++">按钮1</button>
    </div>
    <!-- 数据 -->
    <script>
        new Vue({
            el:"#app",
            data:{
                num1:20,
            }, 
        })
        </script>

v-if和v-show指令

v-if 和v-show都是来控制标签是否显示，但是也有区别，v-show是对样式层面的控制（不会涉及DOM操作），v-if是对dom节点的控制（涉及DOM操作）。

<div id="app">
        <!-- v-if指令的作用： 控制标签是否展示，不展示则删除-->
        <div v-if="bool1">1111111</div>

        <!--bool1的值为true 第一个盒子被保留，删除第二个盒子，
        为false的话，第2个盒子保留，删除第1个盒子-->
        <div v-if="bool1">11111</div>
        <div v-else>222222</div>

        <!-- 多条件 -->
        <div v-if="type=='a'">11111</div>
        <div v-else-if="type=='b'">2222</div>
        <div v-else-if="type=='c'">3333</div>
        <div v-else>4444</div>

        <!--不会删除标签，根据bool1是true还是false决定盒子是显示还是隐藏(在控制display属性的值)-->
        <div v-show="bool1">v-show的用法</div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                bool1: false,
                type: "z"
            }
        })
    </script>

v-for指令

v-for指令可对数组、对象进行遍历,也可以对数字、字符串进行遍历。 列表和对象的渲染(初步使用)

 <div id="app">
        <!--v-for="item in 数组名" item就是数组中每一个元素 -->
        <li v-for="item in list">{{item}}</li>
        <hr>
        <!--v-for="(item,index) in 数组名" item就是数组中每一个元素 index是当前这个元素的下标 -->
        <li v-for="(item,index) in list">{{item}} 、{{index}}</li>
        <hr>
        <!-- v-for="item in 对象名"  item是对象的每一个值 -->
        <li v-for="item in obj">{{ item }}</li>
        <!-- v-for="(item,key) in 对象名"  item是对象的每一个值 key是每一个键名-->
        <li v-for="(item,key) in obj">{{ item }} {{key}}</li>
        <hr>
        <li v-for="item in arr">
            {{item.name}}的年龄是{{item.age}},性别是{{item.gender}}
        </li>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["html", "css", "javascript"],
                obj: {
                    name: "Vue",
                    age: 7,
                    job: "web前端框架"
                },
                arr: [
                    {
                        name: "张三",
                        age: 18,
                        gender: "男"
                    },
                    {
                        name: "李四",
                        age: 17,
                        gender: "女"
                    },
                    {
                        name: "王五",
                        age: 20,
                        gender: "男"
                    }
                ]
            }
        })
    </script>