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

Vue常用语法格式

插值语法

 <div id="app">
        
        <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>
        
        <button v-on:click="num1++">按钮1button>
        <button @click="num1++">按钮1button>
    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">
        
        <div v-if="bool1">1111111div>

        
        <div v-if="bool1">11111div>
        <div v-else>222222div>

        
        <div v-if="type=='a'">11111div>
        <div v-else-if="type=='b'">2222div>
        <div v-else-if="type=='c'">3333div>
        <div v-else>4444div>

        
        <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">
        
        <li v-for="item in list">{{item}}li>
        <hr>
        
        <li v-for="(item,index) in list">{{item}} 、{{index}}li>
        <hr>
        
        <li v-for="item in obj">{{ item }}li>
        
        <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>