VUEの一般的なコマンド
ギャップを埋める
フォームを使用する
domの属性にバインドできます。カスタム属性を区別するために
、vueによって提供される命令はすべてv-を実行します。
命令
v-html
エスケープされていない出力はxmlタイプのデータを解析できます（つまり、ラベルを解析できます）
v-etxt
（ラベルは解析できません）
v-
この要素をレンダリングするかどうかを判断する場合（条件付きレンダリング）
v-show
は表示するかどうかを判断しますこの要素（条件付き表示））
V-for
は、ラベル内のforループ
v-bind
動的バインディングと見なすことができます（v-bindは「：」と書くことができます）
v-model
双方向データバインディング
v-on
バインディングイベント（イベント修飾子とボタンを使用する修飾子は@と省略できます）
{
{a}}
テンプレート構文（すべてのタイプがサポートされていますが、console.logやalertなどの出力構文はサポートされていません）
v-cloakは
ちらつきの問題を解決するために使用されます差分式
スタイル、単一選択効果、複数選択効果スタイルを動的に追加して、スタイルとクラススタイルの切り替えを実現します
スタイルを動的に追加する
- ラベルを動的にバインドする
<标签 v-bind:style="{样式的属性名:变量}">
- バインディングクラス
<标签 v-bind:class="{类名:变量}">
複数選択
CSSスタイルは次のとおりです
<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
padding:0;
list-style:none;
}
li{
width:50px; height:30px; display:inline-block;
text-align:center; line-height:30px;
cursor:pointer;margin-left:5px;
}
li:before{
display:inline-block; width:10px; height:10px;
line-height:10px; content:""; border:1px #000 solid;
margin-right:2px; transition:all 0.3s linear;
}
li.checked:before{
background-color:#0CF;
border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>
DOMドキュメントの構造は次のとおりです。
<ul class="box">
<li v-for="c,index of cities"
:class="{checked:c.bOn}"
@click="checkbox(index)">{
{c.city}}</li>
</ul>
JavaScriptのスタイルは次のとおりです。
<script src="vue.js"></script>
<script>
var app = new Vue({
el : ".box",
data : {
cities : [{city:"北京",bOn:false},
{city:"上海",bOn:false},
{city:"重庆",bOn:false},
{city:"广州",bOn:false},
{city:"西安",bOn:false}]
},
methods : {
checkbox(i){
this.cities[i].bOn = !this.cities[i].bOn;
}
}
})
次のように、複数の選択スタイルと
単一の選択
CSSスタイルを実現できます。
<style type="text/css">
body{margin:0;}
ul{
padding:0; list-style:none;
margin:150px 150px;
}
li{
width:80px; height:50px;
display:inline-block;
border-radius:8px; border:1px #000 solid;
text-align:center; line-height:50px;
cursor:pointer;
transition:all 0.3s linear;
margin-left:5px;
}
li:hover{
background-color:#0CF; color:#fff;
border:1px #fff solid;
}
li.checked{
background-color:#0CF; color:#fff;
border:1px #fff solid;
}
</style>
DOMドキュメントの構造は次のとおりです。
<ul class="box">
<li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{
{c}}</li>
</ul>
JavaScriptのスタイルは次のとおりです。
<script src="vue.js"></script>
<script>
var app = new Vue({
el : ".box",
data : {
cities : ["上海","北京","广州","重庆","西安"],
n : 0
},
methods :{
changeList(index){
this.n = index;//this指向app
}
}
})
</script>
シングルセレクション