vue基础

1.v-text,v-html

<!-- v-text,v-html都可以显示内容 ,v-html可以解析html标签-->

         <p>{{msg}}</p>

        <p v-text="msg"></p>

        <p v-html="msg"></p>

<script>

    let app=new Vue({

        el:"#max",

        data:{

            msg:"<font color='red'> 你好安安安</font>",

          },

    </script>

2. v-on

v-on缩写为@,v-on:click触发vue对象中的方法

 <p>{{age}}</p>

         <button @click="add()">增加</button>

         <button @click="ff()">减少</button>

<script>

    let app=new Vue({

        el:"#max",

        data:{  

            age:18,

        },

        methods:{

            add(){

                this.age++;

            },

            ff(){

                this.age--;

            },

    })

</script>

3.v-show,v-if,v-else-if

 v-if通过删除和添加标签来控制元素的显示和隐藏

  v-show通过样式display来控制元素的显示和隐藏

  <img src="./img/00.jpg" v-show="age>20">

          <img src="./img/00.jpg" v-if="age>20">

   

            <p v-if="score>90">成绩a</p>

            <p v-else-if="score>80">成绩b</p>

            <p v-else-if="score>70">成绩c</p>

            <p v-else>成绩d</p>

 let app=new Vue({

        el:"#max",

        data:{

            age:18,

            score:99,

        methods:{

            add(){

                this.age++;

            },

            ff(){

                this.age--;

            },

    })

</script>

4.v-bind 

v-bind可以缩写为:

用于设置元素的属性.比如:src,title,class.

 <img :src="imgurl[num]">

   <button @click="changeimg()">切换图片</button>

<script>

    let app=new Vue({

        el:"#max",

        data:{

            imgurl:["./img/00.jpg","./img/01.jpg","./img/02.jpg","./img/03.jpg"],

            num:0,

        },

        methods:{

           

            changeimg(){

                if(this.num<this.imgurl.length-1){

                    this.num++;

                }else{

                    this.num=0;

                }

               

            },

        }

    })

</script>

5.v-for

根据数据生成列表结构

<table>

                <tr v-for="(b,index) in books">

                    <td>{{index+1}}</td>

                    <td>{{b.name}}</td>

                    <td>{{b.autor}}</td>

                    <td><a href="#">删除</a></td>

                </tr>

            </table>

<script>

    let app=new Vue({

        el:"#max",

        data:{

             books:[{name:"书1",autor:"作者1"},

            {name:"书2",autor:"作者2"},

            {name:"书3",autor:"作者3"},

            {name:"书4",autor:"作者4"},

            {name:"书5",autor:"作者5"}

            ],

            num:0,

        },

       

    })

</script>

6.v-model

只适合表单元素

获取和设置表单元素的值(双向数据绑定)

                {{p}}

            <input type="text" v-model="p">

            <input type="text" v-model="stu.name">

            <button @click="dj()">点击</button>

<script>

    let app=new Vue({

        el:"#max",

        data:{

            p:"aaa",

            stu:{name:"理论",score:"99"}

        },

        methods:{

            dj(){

                this.p="bb";

                this.stu.name="数学";

            }

            }

           

        }

    })

</script>