你要找的Vue3干货都在这里了,干不干你说了算!

Mr侯_爱前端 -
你要找的Vue3干货都在这里了,干不干你说了算!
1 表单绑定1.文本与多行文本的绑定01 文本
<input v-model="msg" />
<p>{{ msg }}</p>
02 多行文本
<p >{{ msg2 }}</p>
<br />
<textarea v-model="msg2" ></textarea>
2.复选框checkbox01 单个复选框
<input type=checkbox id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
02 多个复选框
<div id="app">
   <input type=checkbox id="name1" value="小明" v-model="checkedNames">
   <label for="name1">小明</label>
   <input type=checkbox id="name2" value="小红" v-model="checkedNames">
   <label for="name2">小红</label>
   <input type=checkbox id="name3" value="mumu" v-model="checkedNames">
   <label for="name3">mumu</label>
   <br>
   <span>选择的名字是: {{ checkedNames }}</span>
</div>

data() {
  return {
  checkedNames: []
}
3.单选框radio
<label><input type=radio value="1"  v-model="sex">男</label>
<label><input type=radio value="2"   v-model="sex">女</label>
<label><input type=radio value="3"   v-model="sex">保密</label>
<p>{{sex}}</p>

data() {
  return {
    sex:1
}
4.选择框select
<div id="v-model-select" >
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>学前班</option>
    <option>小学</option>
    <option>初中</option>
  </select>
<p>{{select}}</p>
5.表单修饰符

.lazy 你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步,在“change”时而非“input”时更新

<input v-model.lazy="msg" />

.number 如果想自动将用户的输入值转为数值类型,可以给v-model 添加number 修饰符

<input v-model.number="age" type=text />

.trim 过滤首尾空白

<input v-model.trim="msg" />
2 计算computed

对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性(从现有数据计算出新的数据)

<p>计算翻转的信息: {{ rmsg }}</p>
Vue.createApp({
  computed: {         
    rmsg: function() {                         
        return this.msg.split('').reverse().join('')
    }
  }
}).mount("#app")
3 watch监听

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器,当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

watch:{
  num(nval,oval){
    console.log(nval,oval)
  }     
}

引用数据类型需要添加处理器handler与deep

watch:{
  person:{
    handler(state){
        console.log(state);
        localStorage.setItem("age",this.person.age);
    },
    deep:true
  } 
}
4 Class与Style01 Class类的绑定

操作元素的 class 列表和内联样式 因为它们都是 attribute,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。

<div  :>你好class绑定</div>

data() {
  return {
    isActive: true,
    hasError: false
  }
}

上面的语法表示 active 这个 class 存在与否将取决于 isActive 的值。

02 Style内联样式的绑定

对象语法:
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名

<div :></div>
5 综合案例

下面一起来看一个综合案例TodoList,它将是本篇文章的最强总结

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title></title>
        <script src=js/vue.js></script>
    </head>
    <body>
        <div id="app">
            <!-- 按下回车把文本框的内容添加到list列表里面 -->
            <h1>每日清单</h1>
            <input type=text placeholder="请输入计划" @keyup.enter="addItem" v-model.trim="temp">
            <h3>未完成{{undoList.length}}</h3>
            <div >
                <div  v-for="(item,index) in undoList" :key="item.tittle">
                    <input type=checkbox v-model="item.done">
                {{item.tittle}} <button @click="removeItem(item)">×</button>
                </div>
            </div>
            
            <h3>已完成{{doneList.length}}</h3>
            <div >
                <div  v-for="(item,index) in doneList" :key="item.tittle">
                    <input type=checkbox v-model="item.done">
                {{item.tittle}} <button @click="removeItem(item)">×</button>
                </div>
            </div>
        </div>
        <script>
            Vue.createApp({
                watch:{
                    "list":{
                        handler(nval){
                            localStorage.setItem("list",JSON.stringify(this.list))
                        },
                        deep:true,
                    }
                },
                computed:{
                    doneList(){
                        // 只要list里面数据done为true就保留
                        return this.list.filter(item=>item.done)
                    },
                    undoList(){
                        return this.list.filter(item=>!item.done)
                    }
                },
                data() {
                    return {
                        // 存放列表的数据
                        // JSON.parse(str) 把str字符串转换为js对象
                        // localStorage.getItem(key)获取到本地存储值
                        // var str = A||B 如果A是转换布尔值为false 那么str 的值就是B
                        // A如果转换为true 那么str的值是A
                        list:JSON.parse(localStorage.getItem("list")||"[]"),
                        temp:''  //存放输入框的数据
                    }
                },
                methods:{
                    addItem(){  //添加
                    // 在列表里面添加temp数据
                        this.list.unshift({tittle:this.temp,done:false});
                        // 添加完毕清空temp
                        this.temp = "";
                    }, 
                    removeItem(item){ //删除
                        console.log(item);
                        var ind = this.list.indexOf(item);
                        this.list.splice(ind,1)
                    }  
                }
            }).mount("#app")
        </script>
    </body>
</html>
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。

Tags 标签

html5vue.jsjavascript前端vue3

扩展阅读

加个好友,技术交流

1628738909466805.jpg