当前位置: 首页> 财经> 股票 > html+CSS+js部分基础运用14

html+CSS+js部分基础运用14

时间:2025/7/10 16:44:35来源:https://blog.csdn.net/m0_55709044/article/details/139456929 浏览次数:0次
  1. 熟悉插值{{}}的用法,在页面中显示下列内容。

图1 插值语法的效果图

  1. 在页面中统计鼠标单机按钮的次数。【提示:v-on指令】,页面效果如下图所示:

图2 统计效果图

3、①单击按钮可以修改黑体字。②通过调试工具vue-devtools修改黑体字。

图3 修改名字和年龄效果图

  1. 文本框输入数据,下面能实时显示对应的欢迎信息。【指令v-model
  • 1.调用vue熟悉插值{{}}的用法

 <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果!</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

  • 2.

主要利用v-on函数和vue框架

<button v-on:click="updata">计数</button>

 <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

3.

通过vue-devtools调试和v-on实现

       <button v-on:click="update">修改</button>

4.

通过v-model实现

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名:<input type="text" v-model:value="name" value="1"><br>

                班级:<input type="text" v-model:value="class1" ><br>

                专业:<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学,欢迎您!</p>

            </fieldset>

        </form>

1.

2

3

4

JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息。

1.

<!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>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="vue1">

        <p>1.文本插值:我的姓名是{{myname}}</p>

        <p>2.使用v-html指令:<span v-html="html1"></span></p>

        <p>3.数值表达式绑定:5+5*3={{5+5*3}}</p>

        <p>4.函数表达式绑定:若x={{x}},x<sup>2</sup>+5={{Math.pow(x,2)+5}}</p>

        <p>5.条件表达式绑定:若yesNo值为{{yesNo}},则我的选择是{{yesNo?'确定':'取消'}}</p>

        <p>6.语句不会生效:var score = 95</p>  

    </div>

    <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果!</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

</body>

</html>

2.

<!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>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <button v-on:click="updata">计数</button>

        <p>按钮被单击<span>{{sum}}</span></p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

</body>

</html>

3.

<!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>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <p>大家好,我是<span>{{name}}</span></p>

        <p>今年<span>{{age}}</span>岁。</p>

        <button v-on:click="update">修改</button>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                name:"王老师",

                age:'30'

            },

            methods:{

                update:function(){

                    this.name="李老师";

                    this.age="40";

                }

            }

        })

    </script>

</body>

</html>

4.

<!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>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名:<input type="text" v-model:value="name" value="1"><br>

                班级:<input type="text" v-model:value="class1" ><br>

                专业:<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学,欢迎您!</p>

            </fieldset>

        </form>

    </div>

    <script >

        new Vue({

            el:'#app',

            data:{

                name:'',

                class1:'',

                zy:''

            }

        })

    </script>

</body>

</html>

关键字:html+CSS+js部分基础运用14

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: