Vue初探（一）

最新推荐文章于 2023-11-09 16:31:53 发布

编个球编个大气球

最新推荐文章于 2023-11-09 16:31:53 发布

阅读量299

点赞数

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

本文链接：https://blog.csdn.net/SanBaDao/article/details/79890702

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简写

1.1绑定click事件

<a v-on:click="doSomething"></a>

可以简写为：

<a @click="doSomething"></a>

1.2 绑定动态属性

<a v-bind:href="url"></a>

可以简写为：

<a :href="url"></a>

二、vue关于class和样式的使用

https://www.cnblogs.com/wymbk/p/6544487.html

2.1 类的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class2{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <div v-bind:class="{'class2': class1}">
    dddddddddddddd
  </div>
</div>
  
<script>
new Vue({
  el: '#app',
  data:{
    class1:true
  }
});
</script>
</body>
</html>

画重点如下：

运行结果如下：

也可以如下写：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class2{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <div v-bind:class="{'class2': true}">
    dddddddddddddd
  </div>
</div>
  
<script>
new Vue({
  el: '#app'
});
</script>
</body>
</html>

画重点如下：