千峰商城-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 @   临易  阅读(46)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示