如何理解某视频剪辑软件的v型指令的使用方法

本文主要讲解v型指令，主要包括超文本标记语言元素的v型和组件上的v型两种，用四个简单的案例介绍v型的使用。

案例一：HTML元素的v型-输入框（文本)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title v-model指令/title脚本src=' http :https://cdn。bootscs。com/vue/2。3 .4/vue。js '/script/head body div id=' app 4 ' { price } } br输入v-model=' price '！-下行注释的语法糖- !-input : value=' price ' @ input=' price=$ event。目标。值'-/div脚本new Vue({ el: '#app4 '，data : { price : ' 20 ' })；/脚本/正文/html

案例二：定制组件的v型-输入框（文本)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title v-model指令/title脚本src=' http :https://cdn。bootscs。com/vue/2。3 .4/vue。js '/script/head body div id=' app 3 ' { price } } my-input v-model=' price '/my-input！-下行注释的语法糖- !-my-input : value=' price ' @ input=' val={ price=val } '/my-input-/div脚本vue。组件(' my-input '，{ template : ' div/span put type=' text ' ref=' input ' : value=' value ' @ input=' doThis '/div '，props: { value: String }，methods: { doThis() { this .$emit('input '，这个参考文献。输入。值)；} } });new Vue({ el: '#app3 '，data : { price : ' 10 ' })；/脚本/正文/html

案例三：定制组件的v型-复选框（复选框)- 2.2.0新增

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title v-model指令/title脚本src=' http :https://cdn。bootscs。com/vue/2。3 .4/vue。js '/script/head body div id=' app2 ' { 0水果}}!-观测数据变化-我的复选框v型='水果。苹果值='苹果/my-复选框！-下行注释的语法糖- !-我的-复选框：检查='水果。苹果@ change=' val={水果。苹果=val }“value=”苹果/my-checkbox-my-checkbox v-model='水果。桃子值='桃子/my-复选框！-下行注释的语法糖- !-我的-复选框：检查='水果。桃子@ change=' val={水果。桃子=val }“value=”桃子/my-checking-/div脚本vue。组件(' my-checking '，{ template : ' div span { { value } }/span put type=' checking ' : checking=' checking ' @ change=' doThis ' : value=' value '/div '，model: { prop: ' checked '，event:$emit('change '，这个。选中)；} } });新Vue({ el: '#app2 '，data : }水果： }//数据apple: true，桃子3360 false } })；/脚本/正文/html

案例四：定制组件的v型-单选按钮（收音机)-2.2.0新增

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title v-model指令/title脚本src=' http :https://cdn。bootscs。com/vue/2。3 .4/vue。js/水果}}!-观测数据变化-我的收音机v型='水果值='苹果我的收音机！-下行注释的语法糖- !-我的-收音机：checked='水果@ change=' val={水果=val } ' value=' apple '/my-radio-my-radio v-model='水果value=' peach ' name=' my水果'/my-radio！-下行注释的语法糖- !-我的-收音机：checked='水果@ change=' val={水果=val } ' value=' peach '/my-radio-/div script vue。组件(' my-radio '，{ template : ' div span { { value } }/span put : name=' name ' type=' radio ' ref=' radio ' checked=' checked=' value ' @ change=' doThis ' : value=' value '/div '，model:$emit('change '，这个参考文献。无线电。值)；} } });新Vue({ el: '#app '，data : }水果： '桃子'//数据} });/脚本/正文/html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。