欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue指令总结

程序员文章站 2022-05-16 14:59:20
...
new  Vue({
         el: "#box",            // element(元素) 当前作用域
         data:{
    msg:"hello!"
 
           },
          methods:{
      changecontent(){
        this.msg='hi!'
      }
    }
        });

一、v-model双向绑定数据 

<input type="text" v-model="msg"/>   {{msg}}      // "hello!"  <!--取数据-->

二、v-for循环

<div id="box">
    <ul>
        <!--ng-repeat-->
        <li v-for="item in arr">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#box',
        data(){
            return{
//                arr:['module','views','controlle','aaaaa']
                arr:[
                    {"name":"xiaohong1","age":12},
                    {"name":"xiaohong2","age":12},
                    {"name":"xiaohong3","age":12},
                    {"name":"xiaohong4","age":12}
                ]
            }
        }
    })
</script>

三、v-show 显示与隐藏

传递的值为布尔值  true  false  默认为false
<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

四、v-if显示与隐藏  

与v-show的区别:v-if的隐藏相当于给代码加注释,也就是删除了DOM元素;v-show相当于在操作display属性,隐藏后DOM元素仍然存在,占用内存。

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

五、v-else与v-else-if(必须与v-if一起使用)

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

v-else-if

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>



<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

六、v-bind(简写:)

v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'  
<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

七、v-on 事件

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按钮</button>
    <!--<button @click="say">按钮</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

八、v-text读取文本

不能读取html标签

<div id="box">
    <div v-text="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"11111"
            }
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

九、v-html  

读取html标签

<div id="box">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"<h1>121212</h1>"
            }
        },
        methods: {
            say() {
            }
        }
    })
</script>

十、v-class (类名)与v-style

<style>
        .red {

            background: red;
        }

        .blue {
            width: 100px;
            height: 100px;
            background: blue;
        }

    </style>


<div id="box">
    <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
    <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>-->    <!--三元运算符方式-->
    <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->

</div>


<script>
    new Vue({
        el: "#box",
        data(){
            return {
                isred:false
            }
        }
    })
</script>

 十一、v-once  

就是  加载一次  如果用到事件中就是事件只执行一次(@click.once="show")

<div id="box">
    <div v-once>{{msg}}</div>
</div>


<script type="text/javascript">
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"qwdqwdqwd"
            }
        }
    })
</script>

十二、v-cloak防闪烁

<div id="box">
    <div v-cloak="">欢迎--{{msg}}</div>
</div>


<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

十三、v-pre  

把标签内部的元素原位输出

<div id="box">
    <div v-pre>欢迎--{{msg}}</div>
</div>



<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

 

相关标签: jc vue