html-v-model/text/html/for

最新推荐文章于 2024-07-18 17:34:14 发布

绝迹刻本

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量75

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_73890636/article/details/133379165

版权

导入vue文件一定要记得写对文件路径

一，按钮切换样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border-radius: 20px;
        }
        .box1{
          
            background-color: lightseagreen;
          
        }
        .box2{
           
            background-color: lightslategray;
     
        }
        .btn{
            margin: 20px;
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="my_vue"></div>
        <button class="btn"@click ="changeBg">{{my_btn}}</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const wm = new Vue({
            el:"#app",
            data() {
                return {
                    my_vue:" box box1",
                    my_btn:"青色",
                    
                    my_ightseagreen:true
                }
            },
            methods: {
                changeBg(){
                    if(this.my_ightseagreen){
                    this.my_vue=" box box2",
            
                    this.my_btn="灰色"
                    this.my_ightseagreen=false
                }else{
                    this.my_vue=" box box1"
                    this,my_btn="青色"
                    this.my_ightseagreen=true

                }
            }
            },
        })
    </script>
</body>
</html>

效果图如下：

点击“青色”按钮可进行变色

将重复的部分提出来

二，V-model的使用

有输入框需要v-modal来保存变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name">
        <p>你的姓名：{{ name }}</p>
        <hr>
        <!-- hr是一条横线 -->
        <input type="text" v-model="school">
        <p>你的学校：{{ school}}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const wm = new Vue({
            el:"#app",
            data() {
                return {
                    name:"",
                    school:""
                }
            },
        })
    </script>
</body>
</html>

三，V-text的使用

用法与v-model类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div id="app">
        <p>{{name}}</p>
        <p v-text="name"></p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const wm = new Vue({
            el:"#app",
            data() {
                return {
                    name:"你的名字：布洛特亨德尔",
                 
                }
            },
        })
    </script>
</body>
</html>

四，v-html的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app">
    
        <p v-text="mybox"></p>

        <p v-html="mybox"></p>
    </div>

    <script src="./vue.js"></script>
    <script>
        const wm = new Vue({
            el:"#app",
            data() {
                return {
                    mybox:'<div class="box">我是DIV</div>'
                 
                }
            },
        })
    </script>
</body>
</html>

五，v-for的使用

for循环的使用更加便利

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            
            background-color: aqua;
            margin: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
      <!-- <div class="box" v-for="item in mylist">{{item}}</div> -->
        <!-- 上面为没有索引的用法 -->

      <div  class="box" v-for="(item,index) in mylist">
        <div>商品名称：{{item.name}}</div>>
        <div>商品价格：{{item.price}}</div>
        <div>商品好评:{{item.good}}</div>
    </div>
 </div>

    <script src="./vue.js"></script>
    <script>
        const wm = new Vue({
            el:"#app",
            data() {
                return {
                   mylist:[
                    {
                        name:"奶茶",
                        price:"12",
                        good:"好喝"
    
                    },
                    {
                        name:"咖啡",
                        price:"18",
                        good:"一般"
                    },
                    {
                        name:"矿泉水",
                        price:"5",
                        good:"偏贵"
                    }
            

                   ]
                 
                }
            },
        })
    </script>
</body>
</html>