• 前端(二十一)—— vue指令:文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令


    文本类指令、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令

    一、文本操作

    • v-text:文本变量
    <p v-text='msg'></p>
    <p>{{ msg }}</p>
    
    • v-once:一次性文本赋值,只能被赋值一次,后期无法更改
    <p v-once>{{ msg }}</p>
    
    • v-html:html文本变量,可以解析html标签
    <p v-html='msg'></p>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '<b>文本</b>'
            }
        })
    </script>
    
    • v-model:双向数据绑定,控制表单元素的value值
    <div id="app">
    	<input type="text" v-model='msg'>
    	<p>{{ msg }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: ''
            }
        })
    </script>
    
    采用文本指令后,页面标签的内容由vue控制,原来用于标签的文本均会被vue中数据替换
    • 文本操作案例
    <body>
    	<div id="app">
    		<!-- html全局属性语法: 全局属性名="属性值" -->
    		<p v-bind:title="title" a="a" b="b">hello</p>
    
    		<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
    		<input type="text" v-model="msg">
    		<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
    		<p>{{ msg }}</p>
    		<!-- eg:原文本会被msg替换 -->
    		<p v-text='msg'>原文本</p>
    		<!-- 可以解析带html标签的文本信息 -->
    		<p v-html='msg'></p>
    		<!-- v-once控制的标签只能被赋值一次 -->
    		<p v-once>{{ msg }}</p>
    	</div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script type="text/javascript">
    	// 指令: 出现在html标签中可以被vue解析处理的全局属性
    	new Vue({
    		el: "#app",
    		data: {
    			title: "",
    			msg: "message"
    		}
    	})
    </script>
    

    二、避免页面闪烁

    • v-cloak:避免页面加载闪烁
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    
    <div id="app" v-cloak>
        
    </div>
    

    三、重要指令(v-bind、v-on、v-model)

    1、v-bind:该指令绑定的是属性(html标签的全局属性)

    **v-bind: 可以简写为 : **

    <div :class='a'></div>
    
    <!-- 值a,两个字符串嵌套使用表示普通字符串 -->
    <div v-bind:class='"a"'></div>
    
    <!-- 变量a -->
    <div v-bind:class='a'></div>
    
    <!-- 变量a, b,class由两个变量 a,b 同时控制 -->
    <div v-bind:class='[a, b]'></div>
    
    <!-- a为class值(类名),isA决定a是否存在(ture | false) ,即类名 a(显示 | 隐藏)-->
    <div v-bind:class='{a: isA}'></div>
    
    <!-- 多class值:是否存在,class的值(类名)为“a b”,isA与isB控制class的值是否存在 -->
    <div v-bind:class='{a: isA, b: isB}'></div>
    
    <!-- class的值(类名)为a b ,t与tt控制‘a b’是否存在 -->
    <div v-bingd:class[{a:t}, {b:tt}]></div>
    
    <!-- 多style值,my_color为变量,cyan为普通值 -->
    <div :style='{color:my_color, background:"cyan"}'></div>
    

    2、v-on: 绑定的是事件,操作的是事件对应的方法名

    v-on: 简写为 @ ,即 v-on:click <====> @click

    <!-- 绑定函数fn1,将事件event传递过去,回调时可以取到事件ev -->
    <div v-on:click='fn1'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(ev){
                	console.log(ev);
            	}
            }
        })
    </script>
    
    <!-- 绑定函数fn2,并将自定义参数10传递过去,回调时只能取到自定义参数,事件参数ev丢失 -->
    <div @click='fn2(10)'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(num){
                	console.log(num);
            	}
            }
        })
    </script>
    
    <!-- 绑定函数fn3,并将事件event与自定义参数10传递过去,回调时可以取到事件ev和自定义参数 -->
    <!-- $event 事件参数为固定写法 -->
    <div @click='fn2($event, 10)'></div>
    <script>
        new Vue({
            el:"#app",
            methods:{
                fn1:function(ev,num){
                	console.log(ev);
            	}
            }
        })
    </script>
    

    3、v-model 数据具有双向绑定,绑定的是value,

    <!--1. 两个input绑定同一个val,那么其中一个input的内容改变会映射到另一个input -->
    <input type="text" v-model='val' />
    <textarea v-model='val'></textarea>
    
    
    <!--2. 单个复选框:选中与否val默认值为true|false ,true选框选中会向后台提交数据,false选框未选中,不向后台提交数据 -->
    <input type="checkbox" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:true    // 设置默认为选中
            }
        })
    </script>
    
    
    <!--3. 通过true-value|false-value修改默认值为true|false -->
    <input type="checkbox" v-model='val' true-value="选中" false-value="未选中" />
    
    <!--4. 多个复选框:val作为数组[]来使用,可以存储选中元素的value值,反之数组有对应value代表该选框选中 -->
    <!-- 出现在数组中的值为选中状态 -->
    <!-- 出现在数组中的值为选中状态 -->
    <input type="checkbox" value="basketball" v-model='val' />
    <input type="checkbox" value="football" v-model='val' />
    <input type="checkbox" value="pingpong" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:["basketball"]
            }
        })
    </script>
    
    
    <!--5. 多个单选框:val存储选中的单选框的value值 -->
    <!-- 变量val的值为哪个单选框中的value值,那么该单选框为选中状态 -->
    <input type="radio" value="男" v-model='val' />
    <input type="radio" value="女" v-model='val' />
    <script>
        new Vue({
            el:"#app",
            data:{
                val:"男"
            }
        })
    </script>
    

    四、条件渲染

    • v-if:值true会被渲染,值false不会被渲染
    <div id="app">
    	<div v-if='isShow'>div div div</div>
        <button @click='isShow = !isShow'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>
    
    • v-else:与v-if结合使用形成对立面
    <div id="app">
    	<div v-if='isShow'>div div div</div>
        <div v-else='isShow'>DIV DIV DIV</div>
        <button @click='isShow = !isShow'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>
    
    • v-else-if:变量的多情况值判断
    <div id="app">
    	<div v-if='tag == 0'>if if if</div>
        <div v-else-if='tag == 1'>else if else</div>
        <div v-else='tag == 2'>else else else</div>
        <input type='number' min='0' max='2' v-model='tag' />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tag: 0
            }
        })
    </script>
    
    • template:不被渲染的vue结构标签
    <template v-if="isShow">
        <p>用template嵌套</p>
        <p>可以为多行文本</p>
        <p>同时显隐</p>
        <p>且template标签不会被vue渲染到页面</p>
    </template>
    
    • v-show:一定会被渲染到页面,以display属性控制显隐
    • key:为v-if方式的显隐创建缓存,提高效率
    <div id="app">
    	<div v-if='tag == 0' key='0'>if if if</div>
        <div v-else-if='tag == 1' key='1'>else if else</div>
        <div v-else='tag == 2' key='2'>else else else</div>
        <input type='number' min='0' max='2' v-model='tag' />
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tag: 0
            }
        })
    </script>
    

    五、列表渲染

    • v-for:循环渲染列表
    <div id="app">
    	<ul>
    		<li v-for='item in items'>{{ item }}</li>
    	</ul>
        <button @click='click'>改变</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                items: ['张三', '李四', '王五']
            },
            methods: {
            	click: function () {
            		this.items.splice(1, 1, '李大大');
            		this.items.pop();
            		this.items.push('赵六')
            	}
            }
        })
    </script>
    
    • 遍历数组
    // items: ['张三', '李四', '王五']
    
    // 值
    <ul>
        <li v-for='item in items'>{{ item }}</li>
    </ul>
    <!-- 值, 索引,一般列表渲染需要建立缓存 -->
    <ul>
        <li v-for='(item, index) in items' :key="index">{{ index }} - {{ item }}</li>
    </ul>
    
    • 遍历对象
    // {'name': '张三', 'age': 18, 'sex': '男'}
    
    // 值
    <div v-for="value in object">
      {{ value }}
    </div>
    // 值, 键
    <div v-for="(value, key) in object">
      {{ key }}: {{ value }}
    </div>
    // 值, 键, 索引
    <div v-for="(value, key, index) in object">
      {{ index }}. {{ key }}: {{ value }}
    </div>
    
    
    • 嵌套数据渲染
    // items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
    <div>
        <div>{{ items[0].name }}</div>
        <div>{{ items[1].age }}</div>
        <div>{{ items[2].sex }}</div>
    </div>
    

    v-if、v-show与v-for案例

    • v-if
    <head>
        <meta charset="UTF-8">
        <title>条件渲染</title>
        <style type="text/css">
            .box {
                 200px;
                height: 200px;
            }
    
            .r {
                background-color: red
            }
    
            .o {
                background-color: orange
            }
        </style>
        <style type="text/css">
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .wrap, .main {
                 500px;
                height: 240px;
            }
            li {
                float: left;
                background-color: #666;
                margin-right: 20px;
            }
            ul:after {
                content: "";
                display: block;
                clear: both;
            }
            .red {background-color: red}
            .green {background-color: green}
            .blue {background-color: blue}
        </style>
    </head>
    <body>
    <div id="app">
        <ul>
            <li @mouseover="changeWrap(0)">red</li>
            <li @mouseover="changeWrap(1)">green</li>
            <li @mouseover="changeWrap(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="wrap red" v-if="tag == 0" key="0">...</div>
        <!-- green页面逻辑结构 -->
        <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
        <!-- blue页面逻辑结构 -->
        <div class="wrap blue" v-else key="2">...</div>
    </div>
    </body>
    <script src="js/vue-2.5.17.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                isShow: false,
                tag:""
            },
            methods: {
                changeWrap(num) {
                    this.tag = num;
                }
            }
        })
    </script>
    
    • v-show
    <style type="text/css">
        .btn_wrap {
             660px;
            margin: 0 auto;
        }
        .btn_wrap:after {
            content: '';
            display: block;
            clear: both;
        }
        .btn {
             200px;
            height: 40px;
            border-radius: 5px;
            float: left;
            margin: 0 10px 0;
        }
        .box {
             660px;
            height: 300px;
        }
        .b1 {background-color: red}
        .b2 {background-color: orange}
        .b3 {background-color: cyan}
    
        .box_wrap {
             660px;
            margin: 10px auto;
        }
    </style>
    
    <div id="app">
        <div class="btn_wrap">
            <div class="btn b1" @click='setTag(0)'></div>
            <div class="btn b2" @click='setTag(1)'></div>
            <div class="btn b3" @click='setTag(2)'></div>
        </div>
        <div class="box_wrap">
            <div class="box b1" v-show='isShow(0)'></div>
            <div class="box b2" v-show='isShow(1)'></div>
            <div class="box b3" v-show='isShow(2)'></div>
        </div>
    </div>
    
    
    <script type="text/javascript">
    	new Vue({
    		el: '#app',
    		data: {
    			tag: 0
    		},
    		methods: {
    			isShow (index) {
    				return this.tag === index;
    			},
    			setTag (index) {
    				this.tag = index;
    			}
    		}
    	})
    </script>
    
    • v-for
    <div id="app">
        <div>
            <input type="text" v-model="inValue">
            <button @click='pushAction'>提交</button>
        </div>
        <ul>
            <li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
    </div>
    
    
    <script type="text/javascript">
    	new Vue({
    		el: '#app',
    		data: {
    			inValue: '',
    			list: []
    		},
    		methods: {
    			pushAction: function () {
    				this.list.push(this.inValue);
    				this.inValue = ''
    			},
    			deleteAction: function (index) {
    				this.list.splice(index, 1);
    			}
    		}
    	})
    </script>
    
  • 相关阅读:
    graphite custom functions
    falcon适配ldap密码同步
    dell 远程管理卡的使用racadm
    mac 入门
    使用 kafkat 在线扩缩容 kafka replicas
    python收集jvm数据
    kafka java.rmi.server.ExportException: Port already in use
    centos6安装最新syslog-ng推送hdfs
    从 falcon api 中获取数据
    fluentd 推送 mariadb audit log
  • 原文地址:https://www.cnblogs.com/linagcheng/p/9872596.html
Copyright © 2020-2023  润新知