vue2

 1 <template>
 2     <div>
 3         <h3>class的使用</h3>
 4         <div :class="oneClass">样式类可以是字符串</div>
 5         <div :class="{classOne: true, classTwo: true}">样式类可以是对象</div>
 6         <div :class="[‘classOne‘, ‘classTwo‘]">样式类可以是数组</div>
 7         <div :class="[oneClass, twoClass]">样式类可以是数组</div>
 8 
 9         <p>------------------------------------------------------------</p>
10 
11         <h3>style的使用</h3>
12         <div
13             style="width: 300px; height: 200px; margin: 10px auto;"
14             :style="{backgroundColor: bgColor, fontSize: fSize}">样式类可以是字符串</div>
15     </div>
16 </template>
17 
18 <script>
19     export default {
20         name: "ClassAndStyle",
21         data() {
22             return {
23                 oneClass: ‘classOne‘,
24                 twoClass: ‘classTwo‘,
25                 bgColor: ‘red‘,
26                 fSize: ‘30px‘
27             }
28         }
29     }
30 </script>
31 
32 <style scoped>
33     .classOne {
34         font-size: 30px;
35         color: red;
36     }
37 
38     .classTwo {
39         width: 400px;
40         height: 200px;
41         background-color: deepskyblue;
42         margin: 10px auto;
43     }
44 </style>
 1 <template>
 2     <div>
 3         <h3>遍历数组</h3>
 4         <ul>
 5             <li v-for="(person, index) in persons" :key="personsKeys[index]">
 6                 ID: {{personsKeys[index]}} ---- {{index}} ) 姓名:{{person.name}}, 年龄:{{person.age}}, 性别:{{person.sex}}
 7             </li>
 8         </ul>
 9 
10         <h3>遍历对象</h3>
11         <ul>
12             <li v-for="(item, key) in persons[0]">
13                 {{key}} --- {{item}}
14             </li>
15         </ul>
16     </div>
17 </template>
18 
19 <script>
20     import shortId from ‘shortid‘
21     export default {
22         name: "ListRender",
23         data(){
24             return {
25                 persons: [
26                     {name: ‘张三‘, age: 18, sex: ‘男‘},
27                     {name: ‘李四‘, age: 28, sex: ‘女‘},
28                     {name: ‘王五‘, age: 38, sex: ‘男‘},
29                     {name: ‘赵六‘, age: 48, sex: ‘女‘},
30                     {name: ‘李奇‘, age: 58, sex: ‘男‘}
31                 ],
32                 personsKeys: []
33             }
34         },
35         mounted() {
36             this.personsKeys = this.persons.map(v=>shortId.generate())
37         }
38     }
39 </script>
40 
41 <style scoped>
42    ul{
43        list-style: none;
44    }
45 </style>
  1 <template>
  2     <div>
  3         <div>
  4             <h3>排序</h3>
  5             <button @click="orderByAge(0)">默认</button>
  6             <button @click="orderByAge(2)">年龄↑</button>
  7             <button @click="orderByAge(1)">年龄↓</button>
  8         </div>
  9 
 10         <p>-------------------------------------------------------------------</p>
 11 
 12         <h3>搜索列表</h3>
 13         <input type="text" placeholder="请输入要搜索的姓名" v-model="searchName">
 14         <ul>
 15             <li v-for="(p, index) in filterPersons" :key="personsKeys[index]">
 16                 {{index + 1}}) 姓名:{{p.name}} --- 性别:{{p.sex}}--- 年龄:{{p.age}}--- 电话:{{p.phone}}
 17             </li>
 18         </ul>
 19     </div>
 20 </template>
 21 
 22 <script>
 23     import shortId from ‘shortid‘
 24 
 25     export default {
 26         name: "ListRenderTwo",
 27         data() {
 28             return {
 29                 searchName: ‘‘,
 30                 persons: [
 31                     {name: ‘张三‘, sex: ‘女‘, age: 19, phone: ‘18921212121‘},
 32                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 33                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 34                     {name: ‘赵六‘, sex: ‘男‘, age: 49, phone: ‘18921556121‘},
 35                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 36                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 37                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 38                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 39                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 40                     {name: ‘赵六‘, sex: ‘男‘, age: 49, phone: ‘18921556121‘},
 41                     {name: ‘李思思‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 42                     {name: ‘张三‘, sex: ‘女‘, age: 19, phone: ‘18921212121‘},
 43                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 44                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 45                     {name: ‘赵六‘, sex: ‘男‘, age: 49, phone: ‘18921556121‘},
 46                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 47                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 48                     {name: ‘李四‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘},
 49                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 50                     {name: ‘王五‘, sex: ‘女‘, age: 39, phone: ‘18921788721‘},
 51                     {name: ‘赵六‘, sex: ‘男‘, age: 49, phone: ‘18921556121‘},
 52                     {name: ‘李五五‘, sex: ‘男‘, age: 29, phone: ‘18921221121‘}
 53                 ],
 54                 personsKeys: [],
 55                 orderType: 0 // 排序
 56             }
 57         },
 58         computed: {
 59             filterPersons() {
 60                 //默认get方法
 61                 // 1. 获取数据
 62                 let {searchName, persons, orderType} = this;//this.searchName\this.persons
 63                 // 2. 取出数组中的数据
 64                 let arr = [...persons];
 65                 // 3. 过滤数组
 66                 if (searchName.trim()) {
 67                     arr = persons.filter(p => p.name.indexOf(searchName) !== -1);
 68                 }
 69                 // 4. 排序
 70                 if (orderType) {
 71                     arr.sort((p1, p2) => {
 72                         if (orderType === 1) { // 降序
 73                             return p2.age - p1.age
 74                         } else { // 升序
 75                             return p1.age - p2.age
 76                         }
 77                     });
 78                 }
 79                 return arr;
 80             }
 81         },
 82         mounted() {
 83             this.personsKeys = this.filterPersons.map(v => shortId.generate())
 84         },
 85         methods: {
 86             orderByAge(orderType) {
 87                 this.orderType = orderType;
 88             }
 89         }
 90     }
 91 </script>
 92 
 93 <style scoped>
 94     ul {
 95         list-style: none;
 96     }
 97 
 98     ul li {
 99         padding: 4px 0;
100     }
101 </style>
/*
  注册全局指令
*/
Vue.directive(‘upper-word‘, (el, binding)=>{
  console.log(el, binding);
  el.textContent = binding.value.toUpperCase();
});

  <p v-upper-word="word1"></p>
1  // 自定义局部指令
2         directives: {
3             ‘lower-word‘(el, binding){
4                 console.log(el, binding);
5                 el.textContent = binding.value.toLowerCase();
6             }
7         }
8 
9  <p v-lower-word="word2"></p>
1          <p>{{content}}(Like IT, IT Like)</p>
2         <p v-text="content">(Like IT, IT Like)</p>//不会改变
3         <p v-html="content"></p>    
 <p v-cloak>{{message}}</p>
  [v-cloak]{
        display: none;
    }

 <p ref="fish">我是一只鱼</p>
 console.log(this.$refs.fish.innerHTML);
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
公众号推荐
   一个历史类的公众号,欢迎关注
一两拨千金