zoukankan      html  css  js  c++  java
  • Vue(指令篇)

    不说废话

     注意事项都在注释里了,自己看

    <!DOCTYPE html>
    <html  xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head lang="en" >
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span{
                color: blue;
            }
            <!--解决闪动效果-->
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
    <div id="my">
    v_text方式:&nbsp;&nbsp;&nbsp;<span v-text="v_text"></span>
        <hr/>
    {{}}方式:&nbsp;&nbsp;&nbsp;<span>{{czbds}}</span>
        <hr/>
        解决{{}}方式插值带来的闪烁效果,添加class样式,再使用v-cloak指令 <span v-cloak>{{czbds}}</span>
        <hr/>
        v-html:不会作为 Vue 模板进行编译&nbsp;&nbsp;&nbsp;<span v-html="v_html"></span>
        <hr/>
        v-show控制标签的display的属性:&nbsp;&nbsp;&nbsp;<span v-show="isShow">你能看到我?</span>
        <!--@click是v-on:click的简写,@就是v-on-->
        <button @click="changeShow">显示或隐藏左边的文字</button>
        <hr/>
        v-model双向绑定:&nbsp;&nbsp;&nbsp;<input type="text" v-model="v_model"> &nbsp;&nbsp;&nbsp;俺跟着左边的一起变:&nbsp;&nbsp;<span>{{v_model}}</span>
        <br/>v-model相当于:value+@input:&nbsp;&nbsp;<input :value="v_model" @input="v_model = $event.target.value"/>
        <hr/>
    if and else不得不说的秘密:&nbsp;&nbsp;<span v-if="ifFlag">是true的时候我才会出来</span>
        <span v-else="ifFlag">值要是false的时候我就出来了</span>
        <!--v-else必须跟紧v-if 或者 v-else-if这两个大哥,要不然自己不会被识别-->
        <!--v-if vs v-show的区别,v-show无论值是什么都会渲染,v-if是个懒汉只有当值第一次为true的时候才会进行渲染-->
        <button type="button" @click="ifFlgClick">点俺可以操控左边的值</button>
        <hr/>
        怎么能少得了我v-for呢?<ul ><li v-for="value in items" v-if="value%2==0">{{value}}</li></ul> <span>v-if比v-for优先级高只显示:value%2==0的数</span>
        <br>
        使用v-for遍历对象,v-bind绑定值
        <select><option v-for="(item,index) in objects" v-bind:value="item.id">{{item.name}}--下标{{index}}</option></select>
    </div>
    <script src="../js/vue.js"></script>  <!--手欠,写成自闭合,导致没有引入成功-->
    <script>
    new Vue({
        el:"#my",//表示所能使用的此对象的标签
        data:{
            czbds:"插值表达式",
            v_text:"v_text方式",
            v_html:"<h4>容易导致XSS攻击</h4>",
            isShow:true,
            v_model:"俺是默认值",
            ifFlag:true,
            //定义一个数组
            items:[1,2,3,4,5,6],
            objects:[{id:1,name:"天雁"},{id:2,name:"斗鹰"},{id:3,name:"血雕"}]
        },
        methods:{
            changeShow:function(){
                this.isShow=!this.isShow;
            },
            ifFlgClick:function(){
               this.ifFlag=!this.ifFlag
            }
        }
    })
    </script>
    </body>
    </html>

    效果大致如下,copy走自己折腾吧

  • 相关阅读:
    hi.baidu.com 百度流量统计
    Autofac is designed to track and dispose of resources for you.
    IIS Manager could not load type for module provider 'SharedConfig' that is declared in administration.config
    How to create and manage configuration backups in Internet Information Services 7.0
    定制swagger的UI
    NSwag在asp.net web api中的使用,基于Global.asax
    NSwag Tutorial: Integrate the NSwag toolchain into your ASP.NET Web API project
    JS变量对象详解
    JS执行上下文(执行环境)详细图解
    JS内存空间详细图解
  • 原文地址:https://www.cnblogs.com/yjc1605961523/p/12629208.html
Copyright © 2011-2022 走看看