您现在的位置是：主页 > news > 中山精品网站建设讯息/百度seo关键词优化市场

中山精品网站建设讯息/百度seo关键词优化市场

admin2025/6/9 6:33:11【news】

简介中山精品网站建设讯息,百度seo关键词优化市场,手机 wordpress html5,网页视频怎么下载到iosvue3 v-x指令v-model用例v-on用例格式v-if用例格式v-elsev-else用例v-else-ifv-else-if用例v-bind用例格式v-show格式v-for用例1_值参数用例2_索引值参数用例3_键名值参数用例4_键名索引值参数迭代整数v-if&v-for联合使用声明:本文为本人根据菜鸟教程整理的笔记,用于查阅和…

中山精品网站建设讯息,百度seo关键词优化市场,手机 wordpress html5,网页视频怎么下载到iosvue3 v-x指令v-model用例v-on用例格式v-if用例格式v-elsev-else用例v-else-ifv-else-if用例v-bind用例格式v-show格式v-for用例1_值参数用例2_索引值参数用例3_键名值参数用例4_键名索引值参数迭代整数v-if&v-for联合使用声明:本文为本人根据菜鸟教程整理的笔记,用于查阅和…

vue3 v-x指令

  • v-model
    • 用例
  • v-on
    • 用例
    • 格式
  • v-if
    • 用例
    • 格式
    • v-else
      • v-else用例
    • v-else-if
      • v-else-if用例
  • v-bind
    • 用例
    • 格式
  • v-show
    • 格式
  • v-for
    • 用例1_值参数
    • 用例2_索引+值参数
    • 用例3_键名+值参数
    • 用例4_键名+索引+值参数
    • 迭代整数
  • v-if&v-for联合使用

声明:本文为本人根据菜鸟教程整理的笔记,用于查阅和梳理.如有侵权立即删除.

指令用于在表达式的值改变时，将某些行为应用到 DOM 上.

v-model

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

用例

<div id="app"><p>{{ message }}</p><input v-model="message">
</div><script>
const app = {data() {return {message: 'message'}}
}Vue.createApp(app).mount('#app')
</script>

v-on

监听事件，并对用户的输入进行响应。

用例

点击按钮实现字符串反转:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app"><p>{{ message }}</p><button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const app = {data() {return {message: 'abc'}},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('')}}
}Vue.createApp(app).mount('#app')
</script>

格式

一般写法:

<a v-on:click="methodName"></a>

缩写:

<a @click="methodName"></a>

v-if

v-if 指令将根据表达式的值(true或false)来决定是否插入v-if所在的DOM元素。

用例

<div id="app"><p v-if="seen">现在你看到我了</p>
</div><script>
const app = {data() {return {seen: true  /* 改为false，信息就无法显示 */}}
}Vue.createApp(app).mount('#app')
</script>

格式

写法:

<p v-if="seen">现在你看到我了</p>

v-else

和v-if平级,用法和条件语句一样.如果值为true显示该DOM.

v-else用例

<div id="app"><div v-if="Math.random() > 0.5">随机数大于 0.5</div><div v-else>随机数小于等于 0.5</div>
</div><script>
Vue.createApp(app).mount('#app')
</script>

v-else-if

放在v-if和v-else之间,用于多种条件的选择.

v-else-if用例

<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div>
</div><script>
const app = {data() {return {type: "C" }}
}Vue.createApp(app).mount('#app')
</script>

v-bind

用于动态的更新HTML元素. href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
注意,这里的href是给这个DOM创建了一个属性.

用例

<div id="app"><p><a v-bind:href="url">菜鸟教程</a></p>
</div><script>
const HelloVueApp = {data() {return {url: 'https://www.runoob.com'}}
}Vue.createApp(HelloVueApp).mount('#app')
</script>

格式

一般写法:

<a v-bind:href="url"></a>

缩写:

<a :href="url"></a>

v-show

和v-if差不多.

格式

<h1 v-show="ok">Hello!</h1>

v-for

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for会渲染它本身所在的DOM内的所有DOM.

用例1_值参数

<div id="app"><ol><li v-for="site in sites">{{ site.text }}</li></ol>
</div>
<script>
const app = {data() {return {sites: [{ text: 'Google' },{ text: 'firefox' },{ text: 'Taobao' }]}}
}Vue.createApp(app).mount('#app')
</script>

输出:

1.Google
2.firefox
3.Taobao

用例2_索引+值参数

v-for 还支持一个可选的第二个参数，参数值为当前项的索引:

<div id="app"><ol><li v-for="(site, index) in sites">{{ index }} -{{ site.text }}</li></ol>
</div>
<script>
const app = {data() {return {sites: [{ text: 'Google' },{ text: 'firfox' },{ text: 'Taobao' }]}}
}Vue.createApp(app).mount('#app')
</script>

输出:

1.0 -Google
2.1 -firefox
3.2 -Taobao

用例3_键名+值参数

对于data内的对象,可以自定义索引.

</head>
<body>
<div id="app"><ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul>
</div><script>
const app = {data() {return {object: {name: '小明',age: 12,gender: 'M'}}}
}Vue.createApp(app).mount('#app')
</script>
</body>

输出:

- name:小明
- age:12
- gender:M

用例4_键名+索引+值参数

写法:

<li v-for="(value,key,index) in obj">
{{index}}.{{key}}:{{value}}
</li>

输出:

索引.键名:值

迭代整数

  <ul><li v-for="n in 10">{{ n }}</li></ul>

输出:一列1-10的整数.

可以用computed属性对数据进行过滤:

<body>
<div id="app"><ul><li v-for="n in evenNumbers">{{ n }}</li></ul>
</div><script>
const app = {data() {return {numbers: [ 1, 2, 3, 4, 5 ]}},computed: {evenNumbers() {return this.numbers.filter(number => number % 2 === 0)//filter用来过滤得到数组中符合要求的item}}
}Vue.createApp(app).mount('#app')
</script>
</body>

v-if&v-for联合使用

给下拉表单设置默认值:

<div id="app"><select @change="changeVal($event)" v-model="selOption"><template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id"><!-- 索引为 1 的设为默认值，索引值从0 开始--><option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option><option v-else :value="site.name">{{site.name}}</option></template></select><div>您选中了:{{selOption}}</div>
</div><script>
const app = {data() {return {selOption: "firefox",sites: [{id:1,name:"Google"},{id:2,name:"firefox"},{id:3,name:"Taobao"},]}},methods:{changeVal:function(event){this.selOption = event.target.value;alert("你选中了"+this.selOption);}}
}Vue.createApp(app).mount('#app')
</script>

相关文章

最新文章