Vue模板语法（上）

最新推荐文章于 2024-05-10 15:09:07 发布

laoluobo76

最新推荐文章于 2024-05-10 15:09:07 发布

阅读量215

点赞数

分类专栏：逻辑python全栈学习文章标签： vue javascript

本文链接：https://blog.csdn.net/laoluobo76/article/details/108611869

版权

逻辑python全栈学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、文本

1、vue对象显示：{{}}

在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

<div id="app">
    <p>{{username}}</p>
    <!--改变一次就改不回来了-->
    <button v-on:click="change">点击修改</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "老萝卜"
        },
        methods: {
            change: function(){
                this.username = 'China';
            }
        }
    });
</script>

-当然，如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。

<p v-once>{{username}}</p>

在这里插入图片描述

改为乒乓值，需要用到条件判断

<div id="app">
        <!--来回切换，到底是谁?-->
        <p>{{username}}</p>
        <!--改变一次就改不回来了-->
        <p  v-once>{{age}}</p>
        <!--实际age的值-->
        <p>"age="{{age}}</p>
        <button v-on:click="change">点击修改</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                "username": "老萝卜",
                age:"永远是17岁的花季"
            },
            methods: {
                change: function(){
                    if (this.username=="老萝卜"){
                        this.username = 'China';
                    }else{
                        this.username = '老萝卜';
                    }
                    this.age=80
                }
            }
        });
    </script>

在这里插入图片描述

2、事件方法绑定：v-on: 或 @

上面例子中，点击事件绑定 vue中定义的一个方法

3、显示原生的HTML：v-html=

有时候我们的Vue对象中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现

<div id="app">
        <a href="https://www.baidu.com">百度一下，你就知道了</a>
        <p>{{username}}</p>
        <p>{{code}}</p>
        <p v-html='code'></p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                username: "老萝卜",
                code:'<a href="https://www.baidu.com">百度一下，你就知道了</a>'
            }            
        });
    </script>

在这里插入图片描述

4、属性绑定： v-bind:

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现

<div id="app">
        <img v-bind:src="imgSrc" alt="2020年共和国授勋仪式">

        <p></p>

        <!--未绑定-->
        <img class="{{classname}}">你好，世界</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                "classname": "pclass",
                "imgSrc": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=68439082,600649479&fm=26&gp=0.jpg"
            }
        });
    </script>

在这里插入图片描述

4.1 绑定Class属性

4.1.1 通过参数方式实现（只能绑定一个）

-如你好，世界

4.1.2 通过数组的方式来实现(绑定多个属性值)

 <div id="app">
        <p v-bind:class="[classname1,classname2]">你好，世界</p>
        <p :class=classname3>老萝卜</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                classname1: "pcolor",
                classname2: "pfont",
                classname3: "pcolor1"
            }
        });
    </script>

在这里插入图片描述

4.1.3 通过对象的方式来实现（通过value值True 或False，来控制是否生效）

<div id="app">
        <p v-bind:class="{pcolor:iscolor,pclass:isfont}">你好，世界</p>
        <p :class=classname3>老萝卜</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                iscolor:true,
                isfont:true,
                classname3: "pcolor1"
            }
        });
    </script>

在这里插入图片描述

4.2 绑定style

5、使用JavaScript表达式

在使用了v-bind的html属性，或者使用了{{}}的文本。我们还可以执行一个JavaScript表达式

<div id="app">
        <p>{{username}}</p>
        <!-- 三元表式确定style, 对username进行分解、倒序、再组合-->>
        <p v-bind:style="{color:color?'red':'blue'}">{{username.split(" ").reverse().join(" ")}}</p>
      </div>
      <script>
          let vm = new Vue({
              el: "#app",
              data: {
                  username: "hello world",
                  color: true
              }
          });
      </script>

在这里插入图片描述

注意，只能是JavaScript表达式，不能是语句，比如var a=1;a=2;这样的是js语句，不是表达式了

二、条件判断

1、条件判断： v-if、v-else-if 及v-else 组合

在模板中，可以根据条件进行渲染。条件用到的是v-if、v-else-if以及v-else来组合实现的

1.1 在一个条件中加载一个html元素

<div id="app">
        <p v-if="weather == 'sun'">今天去公园玩！</p>
        <p v-else-if="weather == 'rain'">今天去看电影！</p>
        <p v-else>今天哪儿也不去！</p>
        <button v-on:click=change_weather_sun>今天晴天</button>
        <button v-on:click=change_weather_rain>今天下雨</button>
        <button v-on:click=change_weather_windy>今天大风</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                weather: 'sun'
            },
            methods:{
                // 类似python中def hello_vue
                change_weather_sun:function(){
                    this.weather= 'sun'
                },
                change_weather_rain:function(){
                    this.weather= 'rain'
                },
                change_weather_windy:function(){
                    this.weather= 'windy'
                }
            }
        });
    </script>

在这里插入图片描述

1.2在一个条件中加载多个html元素

在父标签中进行判断，子标签随父标签加载

<div id="app">
        <template v-if="age<18">
            <p>数学多少分？</p>
            <p>英语多少分？</p>
        </template>
        <template v-else-if="age>=18 && age<25">
            <p>女朋友找到了吗？</p>
            <p>考研究生了吗？</p>
        </template>
        <template v-else>
            <p>二胎生了吗？</p>
            <p>工资多少？</p>
        </template>
        <button v-on:click="age18">我未成年</button>
        <button v-on:click="age25">我没到25呢</button>
        <button v-on:click="age35">我好想一直年青</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                age: 24
            },
            methods:{
                age18:function(){
                    this.age=17
                },
                age25:function(){
                    this.age=24
                },
                age35:function(){
                    this.age=35
                }
            }
        });
    </script>

1.2.1 不同的登录方式之间切换

<div id="app">
    <template v-if="loginType=='username'">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" placeholder="用户名">
    </template>
    <template v-else-if="loginType=='email'">
        <label for="email">邮箱：</label>
        <input type="text" id="email" name="email" placeholder="邮箱">
    </template>
    <div>
        <button v-on:click="changeLoginType">切换登录类型</button>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            loginType: "username"
        },
        methods: {
            changeLoginType: function(event){
                this.loginType = this.loginType=="username"?"email":"username";
            }
        }
    });
</script>

1.2.2 切换后清空输入框的值：在需要重新渲染的元素上加上唯一的key属性

<div id="app">
        <div  v-if="loginType=='username'">
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" placeholder="用户名" key="username">
        </div>
        <div v-else-if="loginType=='email'">
            <label for="email">邮箱：</label>
            <input type="text" id="email" name="email" placeholder="邮箱" key="email">
        </div>
        <div>
            <button v-on:click="changeLoginType">切换登录类型</button>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                loginType: "username"
            },
            methods: {
                changeLoginType: function(event){
                    this.loginType = this.loginType=="username"?"email":"username";
                }
            }
        });
    </script>

2、条件判断： v-show

3、v-show 和v-if 的区别

一般来说， v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切
换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
v-show:显示用户名登录

v-show:显示邮箱登录
v-if : 显示用户登录

三、循环

在模板中可以用v-for指令来循环数组，对象等

1、循环数组

<div id="app">
        <table class="table table-bordered">
            <tr>
                <td>序号</td>
                <td>标题</td>
                <td>作者</td>
            </tr>
            <!-- index是索引 -->
            <tr v-for="(book, index) in books">
                <td>{{ index+1 }}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                books: [
                    {'title': 'python', 'author': '龟叔'},
                    {'title': 'PHP', 'author': 'xxx'},
                    {'title': 'java', 'author': 'zzz'}
                ]
            },
        });
    </script>

在这里插入图片描述

2、循环对象

<div id="app">
        <div v-for="value,key in person">
            {{key}} -- {{value}}
        </div>
        <br>
        -------------------------------------------
        <br>
        <table class="table table-bordered">
            <tr v-for="value,key in person">
                <td>{{key}}</td>
                <td>--</td>
                <td>{{value}}</td>
            </tr>
        </table>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                person: {
                    'username': '老萝卜',
                    'age': 18,
                    'gender': '男'
                }
            },
        });
    </script>

在这里插入图片描述

3、保持状态

循环出来的元素，如果没有使用key元素来唯一标识，如果后期的数据发生了更改，默认是会重用的，并且元素的顺序不会跟着数据的顺序更改而更改

<！--  未保持状态--> 
<div id="app">
        <div v-for="(book, index) in books">
            <span>{{ book }}</span>            
            <input type="text" placeholder="请输入书名">
        </div>
        <button @click='ChangeBooks'>更换图书</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                books:["java","python","C#"]
            },
            methods:{
                ChangeBooks(){
                    this.books.sort(function(a,b){
                        // console.log(a,b)
                        return 5 - parseInt(Math.random()*10)
                    })
                },
            },
        });
    </script>

在这里插入图片描述

<div id="app">
        <span>未绑定</span><br>
        <div v-for="(book, index) in books">
            <span>{{ book }}</span>            
            <input type="text" placeholder={{book}}>
        </div>
        --------------------------------------------------------------------<br>
        <span>已绑定</span>>
        <div v-for="(book, index) in books" v-bind:key='book'>
            <span>{{ book }}</span>            
            <input type="text" v-bind:placeholder="book" >
        </div>
        <button @click='ChangeBooks'>更换图书</button>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                books:["java","python","C#"]
            },
            methods:{
                ChangeBooks(){
                    this.books.sort(function(a,b){
                        // console.log(a,b)
                        return 5 - parseInt(Math.random()*10)
                    })
                },
            },
        });
    </script>

在这里插入图片描述

laoluobo76

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue模板语法（上）

一、文本1、vue对象显示：{{}}在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。<div id="app"> <p>{{username}}</p>  <button v-on:click="change">点击修改</button></div&gt
复制链接

扫一扫