vue之模板语法、文本指令、事件指令、属性指令、style和class、循环渲染

我每天都好饿

已于 2023-09-18 14:58:21 修改

阅读量95

点赞数

分类专栏： vue 文章标签： vue 前端

于 2023-09-15 21:35:31 首次发布

本文链接：https://blog.csdn.net/qq_44779250/article/details/132906303

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 模版语法

模板语法是：{{ }}，它可以渲染多种情况成字符串

渲染字符串，直接将字符串或者变量写在模板语法中
渲染数字，将变量或数字直接填入模板语法中
将数组（列表）、对象（字典）填在模板语法中，会显示数组或对象形式的字符串
渲染数组或对象中的值，数组和对象都可以通过[]来取值，对象还可以通过.语法来取值
渲染三目表达式，x>y?z:t，如果前面的判断条件为真则返回:前面的值，反之
渲染简单的算法，在模板语法中填写简单的算法，会返回结果
渲染函数，将函数传入值，会返回函数的返回值

如下：

<body>
<div id="c1">
    <p>渲染字符串：{{name}}</p>
    <p>渲染数字：{{age}}</p>
    <p>渲染数组：{{list}}</p>
    <p>渲染数组中的某个元素：{{list[2]}}</p>
    <p>渲染对象中的某个元素：{{dict["name"]}}、{{dict.age}}</p>
    <p>三目运算符：{{10>2?"大于2":"小于2"}}</p>
    <p>简单的算法：{{3*5}}</p>
    <p>函数返回结果：{{add(1,2)}}</p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            name: 'cm',
            age: 19,
            list:[1,2,3,'4','3'],
            dict:{name:'caicai', age:12}
        }
    })
</script>

显示结果

2 文本指令

vue 的指令系统，放在标签,以v-开头的，每个指令都有特殊用途

2.1 v-text

把字符串内容渲染到标签内部

使用：，和{{name}}一样，但必须填写变量，不能直接写字符串

2.2 v-html

把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签

渲染到前端就是一个可以点击的链接

<body>
<div id="c1">
    <p v-html="link"></p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            link:'<a href="https://www.baidu.com">百度一下 你就知道</a>'
        }
    })
</script>

2.3 v-show

控制标签显示与否，通过style的display是否等于none控制，在html中还存在

可以通过控制台更改布尔值来实现标签的去除和显示

标签：aaaaa
js语法：show1: true
被删除后标签：aaaaa

2.4 v-if

控制标签的显示与否，通过dom操作做的，这个标签直接从dom中删除了

用法和v-show相同，除了删除之后控制台不能看见这个标签了

3 事件指令

用v-on绑定事件后，只要触发事件，就会执行函数
v-on:点击事件，双击事件，滑动事件 = '函数'
简写：@点击事件，双击事件，滑动事件 = '函数'

用的最多的就是click事件，点击事件

v-on:click=‘函数’，放在标签上，点击标签，就会触发函数的执行，函数必须写在methods中，可以用es6语法的简写

3.1 实现点击控制标签的显示

<body>
<div id="c1">
    <button @click="handleClick">点我</button>
    <div v-show=show1>一个简单的标签</div>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            show1: true,
        },
        methods:{
        		// 这个:function可以省略
                handleClick:function (){
                    this.show1 = !this.show1
                }
            }
    })
</script>

4 属性指令

每个标签都会有属性，动态替换属性的值，就要用到属性指令

公式：v-bind:属性="变量"
简写：:属性='变量'
针对的是所有标签的所有属性

4.1 实现点击更换头像

<body>
<div id="c1">
    <button @click="handleClick">点我</button>
    <br>
    <img :src=img_url width=400px height=400px alt="">
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            img_url:"./img/图片1.jpg",
            img_list:['./img/图片1.jpg','./img/图片2.jpg','./img/图片3.jpg','./img/图片4.jpg','./img/图片5.jpg']
        },
        methods:{
                handleClick(){
                    this.img_url= this.img_list[Math.floor(Math.random() * this.img_list.length)]

                }
            }
    })
</script>

5 style和class

style和class都可以绑定多种类型，如：字符串、数组、对象

5.1 style

建议三种类型使用对象类型

5.1.1 实现点击变色和变换字体

字体变细需要更换div标签中绑定的style样式style_list

<body>
<div id="c1">

    <div :style="style_dict">
        <button @click="handleFine">点击变细</button>
        <button @click="handleblue">点击变蓝</button>
        <p>一个普通的标签</p>
    </div>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            style_str:'background: red;font-size: 60px;font-weight: bold',
            style_list:[{background:'red'},{fontSize:'60px'},{fontWeight:'bold'}],
            style_dict:{background:'red',fontSize:'60px',fontWeight:'bold'}
        },
        methods:{
                handleFine(){
                    this.style_list.pop()
                },
                handleblue(){
                    this.style_dict.background = 'blue'
                }
            }
    })
</script>

5.2 class

5.2.1 实现点击取消绑定class

需要更换div标签中绑定的class样式class_list

   <style>
        .big{
            font-size: 60px;
        }
        .back{
            background-color: greenyellow;
        }
    </style>

</head>
<body>
<div id="c1">

    <div :class="class_dict">
        <button @click="handleFine">点击变无色</button>
        <button @click="handleblue">点击变小</button>
        <p>一个普通的标签</p>
    </div>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            class_str:'big back',
            class_list:['big','back'],
            class_dict:{big:true, back:true}
        },
        methods:{
                handleFine(){
                    this.class_list.pop()
                },
                handleblue(){
                    this.class_dict.big = false
                }
            }
    })
</script>

6 条件渲染

v-if 
v-else-if
v-else

同python中的if类似，根据不同的判定条件渲染

6.1 实现按成绩渲染

<body>
<div id="c1">
    <span v-if="score>=90">优秀</span>
    <span v-else-if="90>score&&score>=60">及格</span>
    <span v-else>不及格</span>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            score:90
        },
    })
</script>

7 循环渲染

列表渲染就是用v-for进行循环，显示多行

7.1 购物车案例+bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
                    <button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
                </div>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <th scope="row">{{item.id}}</th>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>

            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {

            good_list: []

        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            handleDelete() {
                this.good_list.pop()
            }
        }


    })


</script>
</html>

7.2 v-for进行循环

7.2.1 循环数组

可以进行循环数组，如果循环只取一个值的话，就是那个值
如果循环取两个值，前面的值的数组里的值，后面的值那个值所对应的索引位置

<body>
<div id="c1">
    <p v-for="i in list">{{i}}</p>
    <p v-for="(value,index) in list">第{{index+1}}个人是{{value}}</p>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            list:['caicai','luoxi','yaya']
        },
    })
</script>

7.2.2 循环对象

可以进行循环对象，如果循环只取一个值的话，value值
如果循环取两个值，前面的值的对象里的value值，后面的值那个值所对应的key

<body>
<div id="c1">
    <p v-for="i in dict">{{i}}</p>
    <p v-for="(value,index) in dict">第{{index}}个人是{{value}}</p>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            dict:{name1:'caicai',name2:'luoxi',name3:'yaya'}
        },
    })
</script>

7.2.4 其他

还可以循环字符串和数字，循环字符串和数组类似，数字是从1开始

<body>
<div id="c1">
    <p v-for="i in str">循环字符串{{i}}</p>
    <p v-for="(value,index) in str">循环字符串第{{index}}个人是{{value}}</p>
    <p v-for="i in 10">{{i}}</p>
</div>


</body>
<script>
    var vm = new Vue({
        el: '#c1',
        data: {
            str:'hellow word',
        },
    })
</script>