vue学习记录

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 表单控件绑定

    1.text控件：如果修改了text控件的值，span绑定的message会不同更新。

<span>Message is: {{ message }}</span>
<br>
<input type="text" v-model="message" placeholder="edit me">

    2.checkbox控件

<input type="checkbox" >
<label for="checkbox">{{ checked }}</label>

    多个checkbox绑定：每个checkbox绑定一个类型为数组的数据模型checkedNames。

    html代码：

input type="checkbox" >
<label for="jack">Jack</label>
<input type="checkbox" >
<label for="john">John</label>
<input type="checkbox" >
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>

    js代码：

new Vue({
    el: '...',
    data: {
        checkedNames: []
    }
})

    3.radio

<input type="radio" >
<label for="one">One</label>
<br>
<input type="radio" >
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

    4.select

    单选：

<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>

    多选：

<select v-model="selected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected | json }}</span>

    select的option也可以动态通过v-for方式渲染。

    html代码：

<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>

    js代码：

new Vue({
    el: '...',
    data: {
        selected: 'A',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
})


5.npm run build 打包的时候，路径问题

自己编写能use的组件

记得export default 出去

 
以上是 vue学习记录 的全部内容，
                        来源链接：
                            utcz.com/z/380070.html
回到顶部