随笔- 87 文章- 0 评论- 0 阅读- 16456

前端之——vue day02 文本、事件、属性、条件渲染、列表渲染指令，class和style在vue中使用

一、插值语法补充

1.vue没有get，对象取值可以用句点，也可以【'K'】

2.vue里数组取值，直接索引拿

3.三目运算符

和Python三元有略微差别，Py的是结果一 if 条件 else 结果二

三目：条件？结果一：结果二

4.vue中，标签默认是不渲染的

注意：
```
  插值只能写在标签内部，不能写在标签的属性中
```
vm 的data中的数据，可以直接用vm对象句点出来，因为作者封装了一层

<div id="myvue">
        <p>练习vue</p>
        <p>{{name}}</p>
        <p>{{age}}</p>
        <p>{{hobby[1]}}</p>
        <p>{{detail.city}}</p>
        <p>{{detail["car"]}}</p>
        <p> 三目运算符>>>
            {{1>2?'确实':'怎么可能'}}
        </p>
        <p><a href="https://www.baidu.com">未使用vue</a></p>
        <p><a href="{{url}}">使用vue</a></p>
</div>



<script>
    var vm = new Vue({
        el: '#myvue',
        data: {
            name:'jack',
            age:18,
            hobby:['song','dance','rap'],
            detail:{city:'changsha',car:'Han'},
            url:'https://www.baidu.com'

        }

    })
</script>

二、文本指令

准备

去装一下Pycharm的一个插件，进入File | Settings | Plugins，搜索Vue，有个绿色的V形状的插件，下一下

注意

v- 开头的，都是vue指令，可以放在任意标签上

如果在标签属性中写指令，就写变量，不用再双{}，也可以写表达式

<p v-show="10<9?true:false">hahahahahah</p>  #这个是可以的，但是pycharm已经晕了

介绍

1.v-text
	直接把字符串内容渲染在标签内部，等于<p>啥啥啥</p>
2.v-html
	把字符串内容渲染成标签，写在标签内部
     Html转义字符 
        >>><p v-html="url"></p>
3.v-show 
	等于布尔值，该标签是否显示，vue对象中封show=true/false
    标签属性中v-show=show 
    其实就是去掉display /display:none
        
        可以在浏览器的检查——控制台里面调show
        vm.show=true 就会变动之类
	
   这个不会删除整个标签，只是不显示而已
    
4.v-if 
	如果值false,标签整个删除，直接消失

三、属性指令

标签上的所有属性可以绑定变量，变量一变，属性的值也变

v-bind

v-bind:属性名=“属性值” >>>>>>>>>>可以简写成:属性名=“属性值”

1.比如说改a标签的指向链接
	我们先在vue实例中存一下url变量
    url:'https://www.4399.com'
        
 	<a v-bind:href="link" target="_blank">测试测试</a>

注意：

用了属性指令后，属性值必须是变量了，不能是原来的

四、事件指令

v-on:

v-on:事件名='函数' 可以简写成@事件名=“属性值”

vue中，函数不能写在data中了，必须写methods中

methods中想改data中的变量值，因为不在一个域，不能直接改，this.变量名就可以用到 ————this就是vm实例，可以打印看一下this

注意this指向问题

methods中如果再次套了函数，在改函数中，this不再是vm实例，而是window，可以打印看看

如何解决：

在第一层拿一个变量存一下老this即可，后续都拿这个变量作为vm实例来用

es6简写语法

methods里面的变量对函数可以有两种写法
1.K : function(){函数体代码}
2.K (){函数体代码}

第二种+箭头函数能避免this指向问题

五、class 和style

1.念旧

复习一下老的class和style是怎么用的

<style>
.c1 {
    height: 80px;
    width: 80px;

}
.font{
    color: #5bc0de;
}
.font-size{
    font-size: 50px;
}
</style>
______________________________
# 要修饰的标签
<p class="font-size font">测试老的类搭配style使用</p>

2.习新

Class

数组形式（推荐）

1.还是老办法，用:class='' 来添加属性

2.推荐使用数组

3.在js中给数组加内容，是push

给数组移除内容，是pop，还有shift

对象形式

1.标签属性还是那样写，vue实例中class_obj= {font:true，xx:false}的形式

注意：K不能用小横杠，会报错，可以用字符串形式，比如‘font-size’

2.如果是true，前端就渲染，false就不渲染

3.我们依旧可以句点符直接改已有的K

4.但是我们不能添加（能加，值也会变，但是前端样式没变）——牵扯到数组的检测与更新，后面会讲

Style

字符串形式

直接添加就行，不同style直接；后加即可

数组形式

列表套对象，一个个对象k对v，不是很好用

对象形式（推荐）

就是对象形式，注意驼峰可以直接句点

六、条件渲染

一样装饰给标签属性，后面是='条件'

vue中	逻辑层面
v-if	if
v-else-if	elif
v-else	else

七、列表渲染v-for

注意，给要循环的标签加v-for

固定写法

v-for ='item in xxxx' ——xxxx就是自己写的，一般是列表套字典

使用了这个以后，改标签内，就可以使用{{ item.句点}}来取值

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="myvue">

    <div class="container-fluid">
        <div class="row">
            <div class="text-center">
                <br>
                <button @click="click_func">点我显示靓仔信息列表</button>
                <div v-if="show">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>姓名</th>
                            <th>城市</th>
                            <th>年龄</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in detail_list">
                            <th scope="row">{{item.name}}</th>
                            <td>{{item.city}}</td>
                            <td>{{item.age}}</td>
                        </tr>

                        </tbody>
                    </table>
                </div>

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

<script>
    var vm = new Vue({
        el: '#myvue',
        data: {
            show: false,
            detail_list: [{name: '一号嘉宾', city: '长沙', age: 22}, {name: '二号嘉宾', city: '上海', age: 19},
                {name: '三号嘉宾', city: '北京', age: 25}, {name: '四号嘉宾', city: '东京', age: 24}]
        },
        methods: {
            click_func() {
                this.show = !this.show

            }
        }
    })
</script>
</body>
</html>

今日注意

1 ./ 相当于当前路径，不要直接写文件夹，这样好一点
2.js 的k 不用写引号
3.JS中数组就是列表
4.对象就是字典
5三目运算符就是三元表达式
6.js中=！是取反

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .c1 {
    height: 150px;
    width: 150px;
        }
    </style>
</head>
<body>
<div id="myvue">

    <div class="container-fluid">
        <div class="row">
            <div class="text-center">
                <br>
                <button @click="click_func">点我显示靓仔图片</button>
                <br>
                <div v-if="show">
                    <br>
                    <img :src="img_ago" alt="" :class="img_class" @click="stop_func">
                </div>

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

<script>

    var vm = new Vue({
        el: '#myvue',
        data: {
            show: false,
            img_url_list: [
                'https://img2.woyaogexing.com/2023/01/04/81369c30ff64b97d22144ee38e309018.jpg',
                'https://img2.woyaogexing.com/2023/01/04/a2ceb2ea43e6c5cadaaf915d21aa5c59.jpg',
                'https://img2.woyaogexing.com/2023/01/04/04496b725fa4908d61b847dbdbff4507.jpg',
                'https://img2.woyaogexing.com/2023/01/04/13724b9dffa5849c9b3d99a07596fe03.jpg',
                'https://img2.woyaogexing.com/2023/01/03/1f7fd8ede89ffd3a682b8fd94eca64f9.jpeg',
                'https://img2.woyaogexing.com/2023/01/02/8677b537c518fbaf8e52f67094fc0245.jpg',
                'https://img2.woyaogexing.com/2023/01/03/765465751546f33b85178cac4979ffc2.jpeg',
                'https://img2.woyaogexing.com/2023/01/03/59ac87be8a3397ae51e358b72115ef86.jpg',
                'https://img2.woyaogexing.com/2023/01/04/d12597d303bc3fbe5f00dc416e345e53.jpeg',
                'https://img2.woyaogexing.com/2023/01/04/19d66d0f4e668ad50017984510bc9695.jpeg',
            ],
            img_ago: '',
            img_class:[{c1:true},{}],
            t:null

        },
        methods: {
            'click_func'() {
            var _this = this
            if(this.t!=null){
                alert('已经在循环了，请不要再点击')
                return
            }
            this.t = setInterval(function () {
                _this.show = true
                var i = Math.round(Math.random() * (_this.img_url_list.length - 1))
                _this.img_ago = _this.img_url_list[i]
                console.log(i)
            }, 1000)
        },
            'stop_func'(){
                clearInterval(this.t)
                alert(this.img_ago)
                this.t=null
            }
    }
    })

</script>
</body>
</html>

posted @ 2023-02-14 21:13 yiwufish 阅读(135) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端之———Vue day03

· 前端之Vue day07 混入、插件、elementui、Router、Vuex

· vue 插值语法、文本指令、属性指令、事件指令、class和style、条件渲染、列表渲染

· Vue 02

· vue 插值语法文本指令事件指令属性指令 class和style 条件渲染列表渲染

阅读排行：
· 终于写完轮子一部分：tcp代理了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理

公告

嗨
给你大大的赞！

昵称： yiwufish
园龄： 2年7个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

wznn125ml