提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue的基本组件1(show,bind,on,if)

VueOn组件 基本 if bind show
2023-09-14 09:14:26 时间

Vue基础

简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-text,v-html,v-on,v-if。

入门案例

学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            {{username}}
            <h1>{{msg}}</h1>
        </p>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"Vue欢迎你！",
                username:"Jerry"
            },            
        });
    </script>
</html>

运行结果：
在这里插入图片描述

v-text

功能：给标签中的文本添加内容

学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"你好,Vue!"
            },            
        });
    </script>
</html>

运行结果：
在这里插入图片描述

v-html

功能：相比v-text，也是文本替换，只是对于v-html它可以把文本转换成html标签。
学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>
        <br>
        <span v-html="message">随便</span>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"<a href=''>vue欢迎您</a>"
            },            
            methods:{
                
            }
        });
    </script>
</html>

v-on(@click)

简介：绑定点击事件。
学习代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2>年龄：{{number}}</h2>
        <br>
        <input type="button" value="点我改变数字" v-on:click="changenumber">
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello,vue!",
                number:8
            },            
            methods:{
                changenumber(){
                    this.number = 10;
                }	
            }
        });
    </script>
</html>

简写版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on(简化版)</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count的值" @click="changenumber">
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1
            },            
            methods:{
                changenumber(){
                    this.count ++;
                }
            }
        });
    </script>
</html>

运行结果：
在这里插入图片描述

v-if

简介：类比与Java里面的if，判断语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="current=='search'">显示搜索框</div>
        <div v-else-if="current=='keywords'">显示搜索关键字</div>
        <div v-else>显示搜索结果</div>
        <button @click="current='search'">显示搜索框</button>
        <button @click="current='keywords'">显示关键字</button>
        <button @click="current='results'">显示搜索结果</button>
    </div>
</body>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                current:'search'
            },            
            methods:{
                
            }
        });
    </script>
</html>

运行结果：
在这里插入图片描述

相关文章