Vue基本指令

1、V-Once指令
V-Once

2、V-for="item in 数据源"
遍历数据源，通常用于显示列表

3、V-html指令的使用
该指令通常会跟上一个string类型，会将string的html解析出来并且进行渲染。

4、V-text的使用
不够灵活，往往不能再添加东西，只是覆盖标签内的东西。

5、V-Pre的使用
把标签内的内容不做解析，直接显示

6、V-cloak的使用（cloak：斗篷 ）
当html文件已经执行了，vue文件还没执行时，页面会出现变量名的情况，为了避免，用v-cloak来显示为空。
像一块布遮住一样。

7、V-bind的使用
绑定数据

7.1 V-bind基本使用

7.2 动态绑定class
动态绑定class的属性写法：" :class="[类1,类2]" "

7.3 动态绑定方法

7.4 绑定语法

7.5 使用 vue_点击列表项变色（结合v-for和v-bind来实现）
https://www.cnblogs.com/zhuhukang/p/15376498.html

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>作业</title>
  <style>
    .active{
        color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li @click="btnClick(index)" :class="{active:currentIndex === index}" v-for="(item,index) in movies">{{item}}</li>
  </ul>
</div>
<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      movies:['哆啦A梦I','哆啦A梦II','哆啦A梦III','哆啦A梦IV'],
      currentIndex:-1
    },
    methods:{
      btnClick(index){
        this.currentIndex = index
      }
    }
  })
</script>
</body>
</html>

8、V-bind绑定style



posted @ 2021-12-10 22:14  Yaoteng  阅读(213)  评论(0)    收藏  举报