6

你要找的Vue3干货都在这里了，干不干你说了算！

 3 years ago
source link: https://segmentfault.com/a/1190000041473582
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

1 表单绑定

1.文本与多行文本的绑定

<input v-model="msg" />
<p>{{ msg }}</p>

02 多行文本

<p style="white-space: pre-line;">{{ msg2 }}</p>
<br />
<textarea v-model="msg2" ></textarea>

2.复选框checkbox

01 单个复选框

<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" class="demo">
  <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与Style

01 Class类的绑定

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

<div class="static" :class="{ active: isActive, 'text-danger': hasError }">你好class绑定</div>

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

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

02 Style内联样式的绑定

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

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></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 class="list">
                <div class="item" 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 class="list">
                <div class="item" 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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK