vue1基础

最新推荐文章于 2024-04-23 11:15:39 发布

融图

最新推荐文章于 2024-04-23 11:15:39 发布

阅读量210

点赞数

分类专栏： vue 文章标签： vue 初学

本文链接：https://blog.csdn.net/xiangyang_csii/article/details/88316314

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-clock(隐藏未读取数值的msg，提高用户体验)
v-text(直接将信息写入，避免未读取，会将标签中间数据覆盖)
v-html(会读取数据中的html)
v-bind(绑定的作用，与title绑定后放在按钮可显示数据) v-bind: 可简写为：
v-on(响应作用，与click绑定后实现事件的响应) v-on: 可简写为@

substring（？，？）(截取数据，第一个问好为起始位置，0开始；第二个问号是长度，省略说明截取到结束)

Interval 时间间隔

下图代码为理解性写出

<html>
<head>

<script src=””></script>
     <style>
       [v-clock]{
         display:none
}
     </style>
</head>

<body>
<div id=”app”>

<p v-clock>{{msg}}</p>

<p v-text=”msg+’12121’ ”></p>

<p v-html=”msg1”></p>

<input type=”button” value=”这是一个按钮”  :title=”mytitle” @click=”click1”>

<input type=”button” value=”让msg跑起来”  :title=”mytitle” @click=”paomadeng”>

<input type=”button” value=”停下来”  :title=”mytitle” @click=”wen”>



</div>

<script>
var vm = new Vue({
   el:’#app’,
   data:{
msg:’123’，
msg1:’<h1>1111</h1>’,
mytitle:’放在按钮上显示的东西’,
click1:’点击按钮后显示的东西’,
intervalId:null
}，
   methods:{
show:function(){
alert(‘123’)
}，
paomadeng:function(){

If(this.intervalId == null){
this.intervalId = setInterval(() => {
var start = this.msg.substring(0,1)
var end = this.msg.substring(1)
this.msg = start + end
},100);//跑马灯效果的实现
}

},
wen:function(){
clearInterval(this.intervalId)  //实现暂停效果
this.intervalId =null //暂停后可以正常开始
}

}

})