vue v-model

最新推荐文章于 2024-08-14 15:45:18 发布

Almee211

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量135

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/Almee211/article/details/120853865

版权

循环指令 v-for

根据一组数组或对象的选项列表进行渲染。

<body>
  <div id ='app' v-cloak>
    <input type="text"><button @click = 'add '>添加</button>
    <ul>
      <li v-for = '(v,i,key) in listArr' :key='v.id'>
        <input type="checkbox">
        {{i}}----{{v.name}}----{{v.age}}
      </li>
    </ul>
  </div>
</body>
<script>
  const vm = new Vue({
    el:'#app',
    data:{
      val:'',
      listArr:[{
        id:1,
        name:'张淇',
        age:40
      },{
        id:2,
        name:'李承铉',
        age:32
      },{
        id:3,
        name:'白举纲',
        age:30
      }]
    },
    methods: {
      add(){
        this.listArr.unshift({
          id:this.listArr[this.listArr.length-1].id + 1,
          name:'高瀚宇',
          age:34
        })
      }
    },
  })
</script>

设置key的必要性

<body>
  <div id = 'app'>
    <ul>
      <li v-for='(val,key,index) in obj' :key = 'index'>
        {{index}}---{{key}}---{{val}}
      </li>
    </ul>
  </div>
</body>
<script>
const vm = new Vue ({
  el:'#app',
  data:{
    obj:{
      name:'张智霖',
      age:50,
      gender:'男'
    }
  }
})
</script>

运行结果：

分支指令

v-if/v-else-if/v-else

根据表达式的布尔值(true/false)进行判断是否渲染/显示该元素

v-show

v-show是根据表达式之真假值，切换元素的 display CSS属性（是根据表达式的布尔值来判断是否显示该元素）

<body>
  <div id = 'app'>
    <p v-if = 'flag'>flag</p>
    <p v-show= 'flag'>flag</p>
    <button @click='flag =!flag'>切换</button>
    <p v-if ='score>=90&&score<=100'>抢手</p>
    <p v-else-if ='score>=80&&score<90'>优秀</p>
    <p v-else-if ='score>=70&&score<80'>良好</p>
    <p v-else>及格</p>
  </div>
</body>
<script>
const vm = new Vue({
  el:'#app',
  data:{
    flag:false,
    score:80
  }
})

运行结果：

样式绑定

<style>
  .on {
    background: pink;
  }
  .on1 {
    font-size: 20px;
  }
</style>
<body>
  <!-- clss方式 -->
  <div id='app'>
    <p :class='{"on":flag}'>{{msg}}</p>
    <button @click='flag=!flag'>切换颜色</button>
    <p :class='flag?"on":"on1"'>{{msg}}</p>
    <p :class='[active,active1]'>{{msg}}</p>
    <p :class='[active,flag?active1:""]'>{{msg}}</p>
    <p :class='[active,{"on1":flag}]'>{{msg}}</p>
    <p :class='{"on":flag,"on1":!flag}'>{{msg}}</p>
  </div>
  <hr>
  <!-- style方式 -->
  <div id='soft'>
    <p style="background: pink;">{{mes}}</p>
    <p :style="{background:'pink','font-size':'10px'}">{{mes}}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '无名之辈 我是谁',
      flag: true,
      active: 'on',
      active1: 'on1'
    }
  })
  const mvvm = new Vue({
    el:'#soft',
    data:{
      mes:'how do we find the way'
    }
  })
</script>

运行结果：

点击切换颜色后：

v-model

<body>
  <div id='app'>
  //改变文本框中的内容，p标签内的内容会同步更新
    <input type="text" v-model='msg'>
    <p>{{msg}}</p>
    
    //v-model后面的值为true则会选中，反之不选中
    <input type="checkbox" v-model = 'flag'>
    
    //arr数组内的值和value对应时，相应的复选框即为选中状态
    <input type="checkbox" v-model='arr' value="1">李承铉
    <input type="checkbox" v-model='arr' value="2">张晋
    <input type="checkbox" v-model='arr' value="3">陈小春
    <input type="checkbox" v-model='arr' value="4">赵文卓
    
    //v-model的值和value对应时，即为选中状态
    <input type="radio" name="sex" value="男" v-model='Sex'>男
    <input type="radio" name="sex" value="女" v-model='Sex'>女
    <button @click = 'changSex'>修改性别</button>
  //namestr中为哪个value值，下拉框中会显示哪个option
  <select name="" id="" v-model='namestr'>
    <option value="1">张淇</option>
    <option value="2">Pual哥</option>
    <option value="3">ricky</option>
    <option value="4">陈辉</option>
  </select>
</div>
</body>
<script>
const vm = new Vue({
  el:'#app',
  data:{
    msg:'call me name by the fire',
    flag:true,
    arr:[1,3],
    Sex:'女',
    namestr:'3',
  },
  methods: {
    changSex(){
      if(this.Sex == '男'){
        this.Sex = '女'
      }else{
        this.Sex = '男'
      }
    }
  },
})
</script>

表单修饰符

<body>
  <div id = 'app'>
  //在失焦的状态下，才会将文本框和p标签中的内容同步
  <input type="text" v-model.lazy = 'msg'>
  <p>{{msg}}</p>
  
  //num永远是Number类型
  <input type="text" v-model.number='num'>
  <p>{{num}}</p>
  
  //可以删掉文本首尾的空格
  <input type="text" v-model.trim='msg'>
  <p>{{msg}}</p>
</div>
</body>
<script>
const vn = new Vue({
  el:'#app',
  data:{
    msg:'挥一挥我手 继续你的路',
    num:100
  }
})
</script>

运行结果:

双向绑定原理：

<body>
  <div id='app'>
    <input type="text" oninput="chang(this.value)">
    <p></p>
  </div>
</body>
<script>
var data={
  msg:'you know i love so'
}
let inp = document.querySelector('input')
inp.value = data.msg
let p = document.querySelector('p')
p.innerHTML = data.msg
function chang(m){
  console.log(m);
  data.msg = m
}
Object.defineProperty(data,'msg',{
  get(){
    console.log('访问msg');
  },
  set(){
    console.log('修改msg为'+m);
  }
})
</script>

Object.defineProperty

value：默认值（给对象属性赋值）

writable：是否能够写/修改 true | false（默认）

configurable：是否能够删除 true | false（默认）

enumerable：是否可枚举（遍历） true | false（默认）

get：获取属性值

set：设置属性值

注意：不能同时设置(writable，value) 和 get，set方法，否则浏览器会报错。

Almee211

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue v-model

循环指令 v-for根据一组数组或对象的选项列表进行渲染。<body> <div id ='app' v-cloak> <input type="text"><button @click = 'add '>添加</button> <ul> <li v-for = '(v,i,key) in listArr' :key='v.id'> <input type="c...
复制链接

扫一扫