Vue基础指令学习

最新推荐文章于 2026-04-23 09:47:20 发布

原创最新推荐文章于 2026-04-23 09:47:20 发布 · 146 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

Vue-Study

vue常用指令：

v-text（文本内容）
v-html
v-show
v-if
v-for
v-model
v-bind

选项卡页面练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="add('军事')">军事</button>
    <button @click="add('政治')">政治</button>
    <button @click="add('体育')">体育</button>
    <ul v-show=" '军事'===info ">
        <li>军事</li>
        <li>军事</li>

    </ul>
    <ul v-show="'政治'===info ">
        <li>政治</li>
        <li>政治</li>

    </ul>
    <ul v-show="'体育'===info ">
        <li>体育</li>
        <li>体育</li>
    </ul>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            military: '军事',
            info: '军事'
        },
        methods:{
            add(event){
                this.info = event
            }
        }
    })
</script>

</html>

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

调色板练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="app">
    <div :style={height:'200px',width:'200px',background:`rgb(${R},${G},${B})`}></div>

    <input type="range" min="0" max="255" value="0" v-model="R"><span>{{R}}</span>
    <br>
    <input type="range" min="0" max="255" value="0" v-model="G"><span>{{G}}</span>
    <br>
    <input type="range" min="0" max="255" value="0" v-model="B"><span>{{B}}</span>
</div>

</body>


<script>
    var vm = new Vue({
        el: "#app",
        data: {
            R: 0,
            G: 0,
            B: 0
        }
    })
</script>
</html>

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

微博发布文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="app">
    <P><textarea cols="30" rows="10" v-model="info"></textarea><span>{{info.length}}/10</span></P>
     <P>
         <button :disabled="info.length===0|| info.length>10">发布</button>
         <button @click="clear()">清空</button>
     </P>
</div>
</body>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            info:'',
        },
        methods:{
            clear(){
                this.info = ''
            }
        }
    })
</script>

</html>

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

百度预搜索

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>

<div id="app">
    <h1>输入你想要的搜索的内容</h1>
    <input type="text" v-model="info">
    <ul>
        <li v-for="item in arr">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            info:'',
            arr:''
        },
        watch:{
            info(a){
                var path="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+a+"&cb=a";
                var script = document.createElement("script");
                script.src = path;
                document.body.appendChild(script);
            }
        }
    })
    //接收返回来的值
    function a(obj) {
        vm.arr=obj.s
    }
</script>
</html>