正文
vue简单指令笔记
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
v-once 执行一次性插值，数据改变插值处内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
v-text 插入文本
<!--两行效果相同--!>
<h1>{{ message }}</h1>
<h1 v-text="message"></h1>
v-html 插入html代码
<p v-html="msgs"></p>
data () {
return {
msgs: '<h1> hello </h1>',
}
}
v-bind 用来响应地更新 HTML 属性 缩写 '：'
<!-- <h1 v-bind:id="ids">{{ msg }}</h1> -->
<h1 :id="ids">{{ msg }}</h1>
name: 'Practice',
data () {
return {
ids: 'h1_id'
}
}
可以直接使用JavaScript表达式
{{ 4 + 1 }}
{{ 5>6 ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
v-on 绑定事件 缩写 '@'
<button v-on:click="clickthing">点击</button>
<button @[eventName]="clickthing">点击</button> data () {
return {
eventName:'click'
}
},
methods: {
clickthing() {
alert("hello");
},
}
v-model 数据双向绑定
<p>{{ msg }}</p>
<input type="text" v-model="msg">
data () {
return {
msg: '',
}
},
v-if v-else-if v-else 条件语句
<ul>
<li v-if="type === 'A'">A</li>
<li v-else-if="type === 'B'">B</li>
<li v-else-if="type === 'C'">C</li>
<li v-else>Not A/B/C</li>
</ul> data () {
return {
type: 'C',
}
},
v-show 根据条件显示或隐藏元素
<h1 v-show="ok">v-show</h1>
data () {
return {
ok: false,
}
},
v-for 循环指令
<ol>
<li v-for="site in sites" :key="site">
{{ site.name }}
</li>
</ol> data () {
return {
sites:[{name:'小赵'},{name:'小李'},{name:'小王'}]
}
},
