VUE学习二【样式，列表，筛选，排序】

<style>.classA { color: red; }.classB {background: blue; }.classC { font-size: 20px; }</style>
<div id="demo">
  <h2>1. class 绑定: :class='xxx'</h2>
  <p class="classB" :class="a">表达式是字符串: 'classA'</p>
  <p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
  <p :class="['classA', 'classC']">表达式是数组: ['classA', 'classB']</p>
  <h2>2. style 绑定</h2>
  <p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
  <button @click="update">更新</button></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
    el: '#demo',
    data: {
      a: 'classA',
      isA: true,
      isB: false,
      color: 'red',
      fontSize: '20px'
    },
    methods: {
      update() {
        this.a = 'classC'this.isA = false this.isB = true this.color = 'blue'this.fontSize = '30px'
      }
    }
  })</script>

<div id="demo">
  <h2 v-if="ok">表白成功</h2>
  <h2 v-else>表白失败</h2>
  <h2 v-show="ok">求婚成功</h2>
  <h2 v-show="!ok">求婚失败</h2>
  <br>
  <button @click="ok=!ok">切换</button></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({
    el: '#demo',
    data: {
      ok: false
    }
  })</script>

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" :key="index">{{index}}--{{p.name}}--{{p.age}} --
      <button @click="deleteItem(index)">删除</button>--
      <button @click="updateItem(index, {name:'Jok',age:15})">更新</button></li>
  </ul>
  <h2>测试: v-for 遍历对象</h2>
  <ul>
    <li v-for="(value, key) in persons[0]">{{ key }} : {{ value }}</li></ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
    el: '#demo',
    data: {
      persons: [{
        id: 1,
        name: 'Tom',
        age: 13
      },
      {
        id: 2,
        name: 'Jack',
        age: 12
      },
      {
        id: 3,
        name: 'Bob',
        age: 14
      }]
    },
    methods: {
      deleteItem(index) {
        this.persons.splice(index, 1)
      },
      updateItem(index, p) {
 　　　　// this.persons[index] = p // 页面不会更新 
　　　　this.persons.splice(index, 1, p) } } }) 
        </script>

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="demo">
            <input type="text" name="searchName" placeholder="搜索指定用户名" v-model="searchName">
            <ul>
                <li v-for="(p, index) in filterPerson">{{index}}--{{p.name}}--{{p.age}}
                </li>
            </ul><button>年龄升序</button> <button>年龄降序</button> <button>原本顺序</button>
        </div><script type="text/javascript" src="../js/vue.js">
</script><script type="text/javascript">
new Vue(
{ 
el: '#demo', 
data: {
 orderType: 0,
 //0 代表不排序, 1 为升序, 2 为降序 
searchName: '', 
persons: [ 
{id: 1, name: 'Tom', age: 13}, 
{id: 2, name: 'Jack', age: 12},
 {id: 3, name: 'Bob', age: 17}, 
{id: 4, name: 'Cat', age: 14},
 {id: 4, name: 'Mike', age: 14},
 {id: 4, name: 'Monica', age: 16} ] 
},
methods:
 { 
setOrderType (orderType) 
{ 
this.orderType = orderType
 } 
},
computed: 
{ 
filterPerson() 
{
 let {orderType, searchName, persons} = this 
// 过滤
 persons = persons.filter(p => p.name.indexOf(searchName)!=-1)
// 排序 
if(orderType!==0)
 { 
persons = persons.sort(
function (p1, p2) 
{ 
if(orderType===1)
 { return p1.age-p2.age }
 else { return p2.age-p1.age }
 }) 
}
return persons } } }) 
        </script>
    </body>
</html>

VUE学习二【样式，列表，筛选，排序】

猜你喜欢