Vue指令详解：v-if, v-else, v-for, v-text, v-html, v-on与v-model应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51600120/article/details/115083678

vue指令

v-if & v-else 指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-if="seen">可以看到</p>
        <p v-else>请登录</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
                seen: false
            },

        //    template:`

        //     `,
           methods:{

            },
        });
    </script>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxoXcZK5-1616401152338)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210322105443646.png)]

v-for指令

对数组进行排序，，，对数组对象进行排序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <!--对数据进行排序 ，遍历的是新的变量 -->
            <li v-for="l in sortitem">{{l}}</li>
        </ul>

        <br>

        <ul>
            <li v-for="(i,index) in sortlist">{{index+1}}:{{i.name}}--{{i.age}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                item: [
                    13, 24, 32, 45, 7
                ],
                list: [{
                        name: 'ayan',
                        age: 14
                    },
                    {
                        name: 'achao',
                        age: 19
                    },
                    {
                        name: 'ahao',
                        age: 4
                    },
                    {
                        name: 'ayun',
                        age: 94
                    }
                ]
            },
            computed: {
                sortitem: function () { //重新声明一个变量
                    return this.item.sort(sortNumber); //对列表进行排序
                },
                sortlist: function () { //重新声明一个变量
                    return sortByKey(this.list,'age')
                }
            },

            methods: {

            },
        });

        function sortNumber(a, b) {
            return a - b;
        }
      
        //数组对象方法排序:
        function sortByKey(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return ((x < y) ? -1 : ((x > y) ? 1 : 0));
            });
        }
    </script>
</body>

</html>

v-text 和 v-html指令

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴

露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲

染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <span>{{message}}</span>=<span v-text="message"></span><br>
        <span v-html="dodo"></span>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
                message: 'hello',
                dodo:'<h2>hello</h2>'
            },
           methods:{

            },
        });
    </script>
</body>

</html>

v-on指令

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

使用绑定事件监听器，编写一个加分减分的程序。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        本场比赛得分：{{score}}
        <p>
            <input type="text" v-on:keyup.enter="onEnter" v-model="score1">
            <button v-on:click="add">加分</button>
            <button v-on:click="deletes">减分</button>
            <br>
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                score: 0,
                score1: 2,
            },
            methods: {
                add() {
                    this.score++
                },
                deletes() {
                    this.score--
                },
                onEnter() {
                    this.score = this.score + parseInt(this.score1);
                }
            },
        });
    </script>
</body>

</html>

我们的v-on 还有一种简单的写法，就是用@代替。

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。绑定事件写法：

<input type="text" v-on:keyup.enter="onEnter" v-model="score1">

javascript代码：

onEnter() {
                    this.score = this.score + parseInt(this.score1);
                }

因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。

v-model指令

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

		<p>文本框</p>
        <p>v-model：<input type="text" v-model="message"></p>
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
        <p>v-model.number：<input type="text" v-model.number="message"></p>
        <p>v-model.trim：<input type="text" v-model.trim="message"></p>

修饰符

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

文本域绑定数据

		<p>文本域</p>
        <textarea id="" cols="30" rows="10" v-model="message"></textarea>

多选框绑定一个值

		<input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>

多选框绑定数组

		<h3>多选框绑定数组</h3>
        <p>
            <input type="checkbox" id="ayan" value="ayan" v-model="web_names">
            <label for='isTrue'>ayan</label>
            <input type="checkbox" id="achao" value="achao" v-model="web_names">
            <label for='isTrue'>achao</label>
            <input type="checkbox" id="ayun" value="ayun" v-model="web_names">
            <label for='isTrue'>ayun</label>
        </p>
        <p>{{web_names}}</p>

单选按钮绑定

		<h3>单选按钮绑定</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
            <p>你选择的性别是：{{sex}}</p>
        </p>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../vue/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>原始文本信息：{{message}}</p>
        <p>文本框</p>
        <p>v-model：<input type="text" v-model="message"></p>
        <p>v-model.lazy：<input type="text" v-model.lazy="message"></p>
        <p>v-model.number：<input type="text" v-model.number="message"></p>
        <p>v-model.trim：<input type="text" v-model.trim="message"></p>

        <hr>

        <p>文本域</p>
        <textarea id="" cols="30" rows="10" v-model="message"></textarea>

        <hr>

        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>

        <hr>

        <h3>多选框绑定数组</h3>
        <p>
            <input type="checkbox" id="ayan" value="ayan" v-model="web_names">
            <label for='isTrue'>ayan</label>
            <input type="checkbox" id="achao" value="achao" v-model="web_names">
            <label for='isTrue'>achao</label>
            <input type="checkbox" id="ayun" value="ayun" v-model="web_names">
            <label for='isTrue'>ayun</label>
        </p>
        <p>{{web_names}}</p>

        <hr>

        <h3>单选按钮绑定</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
            <p>你选择的性别是：{{sex}}</p>
        </p>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                isTrue: true,
                web_names: [

                ],
                sex: '男'
            },
            methods: {

            },
        });
    </script>
</body>

</html>

v-bind指令

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

html文件：

<img v-bind:src="srcUrl" width="200">

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

js文件：

var app=new Vue({
    el:'#app',
    data:{
          srcUrl: '../vue2.0/7.jpg',
     }
})

v-bind缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

绑定css样式

在工作中我们经常使用v-bind来绑定css样式：

1、绑定Class

<div :class="className">1、绑定Class</div>

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

<div :class="{classA:isOk}">2、绑定Class中的判断</div>

3、绑定class中的数组

<div :class="[classA,classB]">3、绑定Class中的数组</div>

4、绑定class中使用三元表达式判断

<div :class="isOk?classA:classB">4、绑定Class中的三元运算符</div>

5、绑定style

<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式

<div :style="styleObject">6、对象绑定style</div>
var app=new Vue({
    el:'#app',
	data:{
		styleObject: {
                    color: 'yellow',
                    fontSize: '40px'
                }

})

v-pre & v-cloak & v-once

v-pre ：原样输出

<p v-pre>{{message}}</p>

v-cloak: 渲染完成后，才显示！

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，

<p v-cloak>渲染完成后，才显示！</p>

v-once：只渲染一次

<div v-once >{{message}}</div>