美文网首页
玩转Vue_指令2

玩转Vue_指令2

作者: 伍陆柒_ | 来源:发表于2019-02-01 17:34 被阅读0次
数据的双向绑定：v-model
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js" ></script>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
            <!-- v:bind:只能实现数据的单向绑定 -->
            <input type="text" v-bind:value="msg">
            <!-- v:model:可以实现表单元素和Model中数据的双向绑定 -->
            <!-- 只能运用在表单元素中 -->
            <input type="text" v-model="msg">
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el : '#app',
                data : {
                    msg : '大家一起玩vue'
                },
                methods:{
                    
                }
            })
        </script>
    </body>
</html>
简易计算器练习
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="n1">
            <select v-model="sign">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <input type="text" v-model="n2">
            <input type="button" value="=" @click="calc">
            <input type="text" v-model="result">
        </div>
        <script type="text/javascript">
            // 创建一个vue实例,这个实例，即VM
            var vm = new Vue({
                el: '#app',
                data: {
                    sign: '+',
                    n1: 0,
                    n2: 0,
                    result: 0
                },
                methods: {
                    calc() {
                        switch (this.sign) {
                            case '+':
                                this.result = parseFloat(this.n1) + parseFloat(this.n2);
                                break;
                            case '-':
                                this.result = parseFloat(this.n1) - parseFloat(this.n2);
                                break;
                            case '*':
                                this.result = parseFloat(this.n1) * parseFloat(this.n2);
                                break;
                            case '/':
                                this.result = parseFloat(this.n1) / parseFloat(this.n2);
                                break;
                        }
                    }
                    // 注意:eval貌似能够简化我们的代码,但在实际开发中尽量减少使用,不方便调试,同时
                    // 降低了代码的可读性
                }
            })
        </script>
    </body>
</html>
通过绑定class赋予样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .red{
                color: red;
            }
            .active{
                font-size: 20px;
            }
            .weight{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 第一种方式：直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定 -->
            <p :class="['red','active','weight']">p标签，样例文本</p>
            <!-- 在数组中使用三元运算符,提高代码可读性 -->
            <!-- 类名red，active的单引号可以省略，flag是data中的数据 -->
            <p :class="[{'red':flag,'active':flag}]">p标签，样例文本</p>
            <!-- 另一种方式 -->
            <p :class="styles">p标签，样例文本</p>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    flag : true,
                    styles : {'red':true,'active':true}
                },
                methods: {}
            })
        </script>
    </body>
</html>
使用内联样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .red{
                color: red;
            }
            .active{
                font-size: 20px;
            }
            .weight{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 第一种方式：直接绑定，注意：font-weight中有'-'号，必须加单引号 -->
            <h1 :style="{color:'red','font-weight':'100'}">这是一个h1标签</h1>
            <!-- 第二种方式：直接绑定 -->
            <h1 :style="styleObj1">这是一个h1标签</h1>
            <!-- 第三种方式：使用数组 -->
            <h1 :style="[styleObj1,styleObj2]">这是一个h1标签</h1>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    styleObj1 : {color:'red','font-weight':200},
                    styleObj2 : {'font-size':'50px'}
                },
                methods: {}
            })
        </script>
    </body>
</html>
v-for
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 你这么做会让人笑掉大牙 -->
            <!-- <p>{{list[0]}}</p>
            <p>{{list[1]}}</p>
            <p>{{list[2]}}</p>
            <p>{{list[3]}}</p>
            <p>{{list[4]}}</p>
            <p>{{list[5]}}</p> -->
            <!-- 想使用索引值时,使用括号，里面的i即是索引 -->
            <p v-for="(item,i) in list">{{i}}--{{item}}</p>
            <!-- 遍历对象数组 -->
            <p v-for="(user,i) in listObj">{{i}}--{{user.id}}--{{user.name}}</p>
            <!-- 遍历对象,注意：括号中第一个参数是value值，第二个是key值 -->
            <!-- 此处的i也是索引，但用处不大 -->
            <p v-for="(val,key,i) in user">{{val}}--{{key}}--{{i}}</p>
            <!-- 放数字，代表循环次数,count默认从1开始 -->
            <p v-for="count in 10">这是第{{count}}次循环</p>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    list:['a','b','c','d','e','f'],
                    listObj:[
                        {id:101,name:'张三'},
                        {id:102,name:'李四'},
                        {id:103,name:'王五'},
                        {id:104,name:'赵六'}
                    ],
                    user:{
                        id : 1001,
                        name : '大力',
                        gender:'男'
                    }
                },
                methods: {}
            })
        </script>
    </body>
</html>
v-for中的使用问题
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>
                <label>
                    <!-- 双向绑定id -->
                    Id : <input type="text" v-model="id">
                </label>
                <label>
                    <!-- 双向绑定name -->
                    Name : <input type="text" v-model="name">
                </label>
                <!-- 绑定触发函数add -->
                <button type="button" @click="add">添加</button>
            </div>
            <p v-for="item in list">
                <input type="checkbox" name="namelist">
                {{item.id}} ---- {{item.name}}
            </p>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    id : '',
                    name : '',
                    list : [
                        {id:1,name:'关羽'},
                        {id:2,name:'吕布'},
                        {id:3,name:'张飞'},
                        {id:4,name:'刘备'},
                        {id:5,name:'曹操'}
                    ]
                },
                methods: {
                    /*
                        向list中添加对象,即文本输入框中的id和name,
                        这里如果使用unshift从起始位置存入list就会在
                        选中某一个选项并添加新的节点时，出现bug
                    */
                    add(){
                        // this.list.push({id:this.id,name:this.name})
                        this.list.unshift({id:this.id,name:this.name})
                    }
                }
            })
        </script>
    </body>
</html>
解决方式
<!-- 注意：v-for循环的时候，key属性只能使用number或String -->
<!-- 注意：key在使用的时候，必须使用v-bind绑定 -->
<!-- 在一些特殊情况下，如在组件中，如果v-for时有问题，必须指定唯一的字符串/数字 :key值 -->
<p v-for="item in list" :key="item.id">
    <input type="checkbox" name="namelist">
    {{item.id}} ---- {{item.name}}
</p>
v-if和v-show
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <button type="button" @click="toggle">切换</button>
            <!-- v-if特点：每次都会重新删除或创建元素，如果需要频繁的切换，不推荐使用 -->
            <!-- v-show特点：每次不会重新进行DOM的删除和创建，只是切换了display样式 -->
            <!-- v-if 有较高的切换性能消耗 -->
            <!-- v-show 有较高的初始渲染消耗 -->
            <h3 v-if="flag">这是v-if控制元素</h3>
            <h3 v-show="flag">这是v-show控制元素</h3>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    flag :true
                },
                methods: {
                    toggle(){
                        this.flag = !this.flag;
                    }
                }
            })
        </script>
    </body>
</html>

相关文章

  • 玩转Vue_指令2

    数据的双向绑定：v-model 简易计算器练习 通过绑定class赋予样式 使用内联样式 v-for v-for中...

  • 玩转Vue_指令1

    内容相关v-cloak(了解),v-text,v-html 绑定属性v:bind 绑定事件v-on 跑马灯练习 事...

  • Vue_常用指令

    常用指令 1、插值表达式 {{}}当模型中的数据发生改变时，视图中的数据也发生相应的改变 2、v-text 将一个...

  • 玩转Vue_组件

    什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们...

  • 玩转Vue_入门程序

    Vue简介 Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架2016年最火的前端...

  • 玩转Vue_使用axios

    进入项目安装axios（npm install axios -S） axios配置 项目中安装axios模块完成后...

  • 4、Vue_模板语法/指令

    介绍Vue常用的一些模板语法/指令 View层：定义div插值表达式{{}}：用于接收来自Model的数据并输出展...

  • 玩转Vue_项目实例_环境

    搭建项目环境 App.vue index.html main.js router.js .bablerc pack...

  • 玩转Vue_生命周期

    其中，created(创建)和mounted(挂载)钩子函数相对重要

  • 玩转Vue_路由vue-router

    什么是路由 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 对于单页面应用...

网友评论

      本文标题：玩转Vue_指令2

      本文链接：https://www.haomeiwen.com/subject/ujgrsqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|玩转Vue_指令2|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！