千峰商城-springboot项目搭建-19-vue的基本语法

基本结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            {{code}}
            从vm中获取的数据为：{{str}}
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    code:101,
                    str:"cqyzs"
                    }
            });            
        </script>        
    </body>
</html>

 

 

1.基本类型数据和字符串

{{code}}
{{str}}
        
-------------------------------------------
   
data:{
   code:101,
   str:"test"
}

 

 
2.对象类型数据
（支持ognl语法）
{{stu.stuNum}}

--------------------------

stu:{
    stuNum:"10001",
    stuName:"张三",
    tudGender:"M",
    stuAge:20
                    }

 

3.条件：v-if

<label v-if="stu.stuGender=='M' ">男</label> <br />

------------------------------------------------------------------

stu:{
    stuNum:"10001",
    stuName:"张三",
    stuGender:"M",
    stuAge:20
}

 

4.循环：v-for

            <table border="1" cellspacing="0" width="400">
                <tr>
                    <th>序号</th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                <tr v-for="s,index in stus">
                    <td>{{index+1}}</td>
                    <td>{{s.stuNum}}</td>
                    <td>{{s.stuName}}</td>
                    <td>
                        <label v-if="s.stuGender == 'M'">男</label>
                        <label v-if="s.stuGender == 'F'">女</label>
                    </td>
                    <td>{{s.stuAge}}</td>
                </tr>
            </table>

------------------------------------------------------------------------------------------

                    stus:[
                        {
                            stuNum:"10001",
                            stuName:"张三",
                            stuGender:"M",
                            stuAge:20
                        },
                        {
                            stuNum:"10002",
                            stuName:"李四",
                            stuGender:"F",
                            stuAge:21
                        },
                        {
                            stuNum:"10003",
                            stuName:"王五",
                            stuGender:"M",
                            stuAge:22
                        }
                    ]

 

 

 

5.v-bind：绑定标签属性

<input type="text" value="str" />

 

 

 

<input type="text" v-bind:value="str" />

 

 

 

                    <table border="1" cellspacing="0" width="400">
                <tr>
                    <th>序号</th>
                    <th>学号</th>
                    <th>头像</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                <tr v-for="s,index in stus">
                    <td>{{index+1}}</td>
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="60" v-bind:src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                        <label v-if="s.stuGender == 'M'">男</label>
                        <label v-if="s.stuGender == 'F'">女</label>
                    </td>
                    <td>{{s.stuAge}}</td>
                </tr>
            </table>
---------------------------------------------------------------------------------
                    stus:[
                        {
                            stuNum:"10001",
                            stuName:"张三",
                            stuGender:"M",
                            stuAge:20,
                            stuImg:"img/2.jpg"
                        },
                        {
                            stuNum:"10002",
                            stuName:"李四",
                            stuGender:"F",
                            stuAge:21,
                            stuImg:"img/3.jpg"
                        },
                        {
                            stuNum:"10003",
                            stuName:"王五",
                            stuGender:"M",
                            stuAge:22,
                            stuImg:"img/4.jpg"
                        }
                    ]

 

 

 

v-bind:  可以省略为：  ：

            <table border="1" cellspacing="0" width="400">
                <tr>
                    <th>序号</th>
                    <th>学号</th>
                    <th>头像</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
                <tr v-for="s,index in stus">
                    <td>{{index+1}}</td>
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="60" :src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                        <label v-if="s.stuGender == 'M'">男</label>
                        <label v-if="s.stuGender == 'F'">女</label>
                    </td>
                    <td>{{s.stuAge}}</td>
                </tr>
            </table>

 

 

6.表单标签的双向绑定：v-model

(使用在表单输入标签中，只针对value使用（v-model:value)，可以简写为v-model。）

<input type="text" v-model:value="str" />

<input type="text" v-model="str" />  <!--简写-->


---------------------------------------------------------------
data{
    stu:{
        stuImg:"img/1.jpeg"
        }
}

 

 
 
 
 
 
 
 
posted @ 2022-06-29 15:37  临易  阅读(49)  评论(0)    收藏  举报