第六次练习

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量350 收藏 9
点赞数 8
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75844191/article/details/134881714
版权

1.v-bind v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>six</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div id="one">

        <a v-bind:href="url">链接1</a>
        <a >链接2</a>
        <input type="text" v-model="url">
    </div>
    <script>
        new Vue({
            el:"#one",
            data:{
                url:"https://www.csdn.net"
            }
        })
    </script>






    
</body>
</html>

2.v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <div id="two">
        <input type="button" value="点我一下" v-on:click="handel()">
        <input type="button" value="chick" v-on:click="handel2()">
    </div>

<script>
    new Vue({
        el:"#two",
        data:{

        },
        methods:{
            handel:function(){
                alert("你点我");
            },
            handel2:function(){
                alert("click")
            }
        }

    })
</script>




</body>
</html>

3.v-if v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-show</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age<=35">年轻人(35及以下)</span>
        <span v-if="age<60 && age>35">中年人(35-60)</span>
        <span v-if="age>=60">老年人(60及以上)</span>{{age}}

        <br><br>

        年龄<input type="text" v-model="age">经判定,为:
        <span v-if="age<=35">年轻人(35及以下)</span>
        <span v-if="age<60 && age>35">中年人(35-60)</span>
        <span v-if="age>=60">老年人(60及以上)</span>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
</script>
</html>

4.v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-for="(item, index) in addrs">{{index+1}}:{{item}}<br></span>
</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

5.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(use,index) in users">
                <td>{{index+1}}</td>
                <td>{{use.name}}</td>
                <td>{{use.age}}</td>
                <td>
                    <span v-if="use.gender==1">男</span>
                    <span v-else="use.gender==0">女</span>
                </td>
                <td>{{use.score}}</td>
                <td>
                    <span v-show="use.score>=85">优秀</span>
                    <span v-show="use.score>=60 && use.score<85">及格</span>
                    <span style="color: red;" v-show="use.score<60">不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

 6.生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <span v-for="(item,index) in list">{{index+1}}:{{item}}<br></span>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           list: ['第一项', '第二项', '第三项']
        },
        methods: {
            
        },
        mounted(){
            alert("vue挂载完成 ,发送请求到服务端");
        }
    })
</script>
</html>

vvvolcanoooo
关注
  • 8
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据库系统概念第六版 第六章练习题6.11
Ding 的博客
09-26 1万+
6.11 考虑下图所示的关系数据库，主码加了下划线。给出关系代数表达式来表达下列的每一个查询： a.找出First Bank Corporation的所有员工姓名 b.找出First Bank Corporation所有员工的姓名和居住城市 c.找出First Bank Corporation所有年收入在10000美元以上的员工姓名和居住的街道、城市。 d.找出所有居住地与工作的公司在同一城市的...
第六次练习赛题解1
08-03
第六次练习赛题解1
C Primer Plus第六版(中文版)编程练习答案(完美修订版)汇总
热门推荐
CLOVER的博客
01-11 14万+
//本文是博主编写的C Primer Plus第六版(中文版)编程练习答案的所有链接; //使用超链接来汇总于此,若是有用请点赞并分享给他人; C Primer Plus 第六版(中文版)第二章(完美版)编程练习答案 C Primer Plus 第六版(中文版)第三章(完美版)编程练习答案 ...
第六次课后练习
2202_75844191的博客
12-08 370
【代码】第六次课后练习。
谭浩强c语言第六版答案,C语言谭浩强版本第6章课后练习题答案
weixin_29522501的博客
05-18 889
第6章课后练习题一、单项选择题1．以下程序执行后，a是：int a =0,i,j;for (i=5;i>0;i--)for(j=0;j<4;j++) a++;A)20B)25C)24D)302．执行以下程序段，正确的是：int x=-1;do {x=x*x; } while(! x)；A)循环体将执行一次B)循环体将执行两次C)循环体将执行无限次D)系统将提示有语法错误3．执行以下程序...
届高三语文第六次练习试题(扫描版).doc
11-06
届高三语文第六次练习试题(扫描版).doc
届高三英语第六次练习试题(扫描版).doc
11-06
届高三英语第六次练习试题(扫描版).doc
C Primer Plus第6版编程练习答案.zip
08-04
C Primer Plus第6版编程练习答案.zip
CPrimerPlus第6版编程练习答案共78页.pdf.zip
10-28
CPrimerPlus第6版编程练习答案共78页.pdf.zip
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 564
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1436
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1270
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1063
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 510
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1277
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 825
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 285
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 204
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
python第六章程序练习题
05-27
好的，下面是Python第六章的程序练习题： 1. 编写一个程序，要求用户输入一个整数n，然后输出n的阶乘。 2. 编写一个程序，要求用户输入一个整数n，然后输出所有小于等于n的素数。 3. 编写一个程序，要求用户输入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值