VUE的使用

最新推荐文章于 2024-04-02 21:13:11 发布

cabacwj

最新推荐文章于 2024-04-02 21:13:11 发布

阅读量92

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cabacwj/article/details/126874885

版权

vue的方法属性

代码如下：

<!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>Document</title>

</head>

<body>

<div id="root">

<h2>{{sayhello()}}</h2>

<p>姓名：{{name}}</p>

<p>地址:{{city}}</p>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el: '#root',

data: {

name: '胡雅菜',

city: '哈利市'

},

methods: {

sayhello(){

return `来至${this.city}的${this.name}!!!`

}

},

})

</script>

</body>

</html>

效果图：

vue的计算器

代码如下：

<!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>Document</title>

</head>

<body>

<div id="root">

<h1>当前的计数是：{{counter}}</h1>

<button @click="add">-</button>

<button @click="sub">+</button>

</div>

<script src="./vue.js"></script>

<script>

new Vue({

el:'#root',

data:{

counter:0

},

// vue方法

methods: {

add(){

console.log('add被执行了');

this.counter--

},

sub(){

console.log('sub被执行了');

this.counter++

}

},

})

</script>

</body>

</html>

vue的图片切换

代码如下：

<!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>Document</title>

<style>

* {

margin: 0;

padding: 0;

}

#app {

width: 1000px;

margin: 0 auto;

font-size: 0;

}

img {

width: 100%;

height: 530px;

}

a {

display: inline-block;

font-size: 20px;

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

background-color: gray;

}

.left {

float: left;

}

.right {

float: right;

}

</style>

</head>

<body>

<div id="app">



<img :src="imgArr[index]">



<a href="#" class="left" @click="prev" v-show="index!=0">

< </a>



<a href="#" class="right" @click="next" v-show="index<imgArr.length -1">></a>

</div>

<script src="/vue.js"></script>

<script>

new Vue({

el: '#app',

data: {

imgArr: [

"img/1.jpg",

"img/2.jpg",

"img/3.jpg",

"img/4.jpg"

],

index: 0

},

methods: {

prev: function () {

this.index--

},

next: function () {

this.index++

}

},

})

</script>

</body>

</html>